One mistake beginners do is to rely on the very basic knowledge of CSS selectors, i.e.: tag names, classes and IDs. That’s a mistake, because knowing a little better will get you a long way with less effort.

Here’s a quick example showing the power of a sibling selector.

The challenge is very simple: create an image with an italicized description centered below. Standard layout affair.

You may be tempted to add a class to the text to make it stylized and perhaps add a margin to the image. Maybe the right thing to do would be to add some class to the image as well?

It’s a solution, but think about it this way: you’re now inclined to add classes to every instance in which there’s an image followed by some text. That could be a hassle. 

Why bother? Use the sibling (+) selector and treat every image followed by a text the same way!

See below: