There are special cases where a simple CSS selector is not enough. Like yesterday, when I wanted to match all the uploaded images in my blog, regardless of the container and the content.
Let’s see an example markup:
1 2 3 4 5 6 7 8 9 10 11 12
How do we match only the images?
Well, there are many solutions. The simplest is certainly to use the
img selector; but this way we’d match all the images, which isn’t our goal. We just want to match the uploaded ones.
Let’s examine the markup above. See, WordPress uses some classes in order to apply the correct size or alignment, and finally applies a unique class with a progressive number (
wp-image-*), just in case we want to match a single element. So we could do this:
1 2 3 4
The solution above works, but it is not handy because – as you may have guessed – we should update the selector each time we upload a new image.
Hey, are we supposed to hard-code all the classes?
No, absolutely! That’s an absurd solution. Let’s explore other options.
In our specific case, this would do the trick:
1 2 3 4
Note that I’m talking about CSS3, so if you need to support older browsers, don’t lean on it.
Cool. What else?
The table of selectors presents a whole bunch of possibilities, even though the usefulness isn’t always evident. But I’m sure you can find an example for every selector listed there. So, whether you are a CSS wizard or not, my final advice is: go create cool stuff, because practice makes perfect.