Using a CSS wildcard selector in WordPress

Using a CSS wildcard selector in WordPress

I wanted to add some padding on the right of every tag in the tag cloud shown on the bottom of my blog. I thought each tag was too close to the next tag, making it harder to see when one tag ends and the next one begins. I took a look at the code in Chrome’s developer tool and this is what I saw:

Every tag has its own unique CSS class selector. I had two choices. I could either add a CSS rule for each tag, or I could add a wildcard selector. Because I’m a normal human being, I chose the later. Adding a unique selector not only would require a massive amount of CSS, it would require me to be constantly adding new class selectors every time I create a new tag. That would be crazy.

Each CSS rule starts with tag-link- and is then followed by the ID of that tag. I could add padding to the right side of each tag by adding a CSS selector wildcard. I added the following CSS to my theme’s stylesheet:

This added 1% of padding to the right side of every CSS selector that begins with tag-link-. Once I did this, every tag in the tag cloud had the proper spacing from its neighbor.

I'm originally from southern California, but western Maryland is my home now. This is my blog. It's where I write about whatever I feel like writing about, when I feel like writing.

You can follow me on Twitter. I promise I'll follow you back. You can also be my fake Facebook friend if you like.

Leave a Reply