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.