Photo by Uriel Soberanes on Unsplash

CSS’ sibling combinators in 2 minutes

Often overlooked, sometimes forgotten 😭

Most of those familiar with CSS will have a good idea of what the following CSS does;

Nothing scary here 👻

The overlooked selectors

How about these rules?

These are sibling selectors using the selector combinators tilde(~) and plus(+) .

~

The tilde(~) character selects all siblings that succeed a given element.

Consider a calendar;

Image we wanted to reduce the opacity of all days succeeding today;

This would result in;

You might not use it often but it can be very useful when the right scenario presents itself.

+

The plus(+) selector combinator syntax acts in a similar way only selecting the first sibling.

Take our calendar example. Let’s only highlight tomorrow.

Which results in;

Similar to the ~ combinator, you might not use it often. It has its moments.

Consider a music player or something with a playlist for example 👍

That’s it!

General sibling selectors in no time at all! 🙌

As always, any questions or suggestions, please feel free to leave a response or tweet me 🐦!