CSS Selectors : conditionals in CSS (sort of)

CSS selectors are what make our style sheets do what they do. From class selectors(.class) to Pseudo-element selectors (.box:after) we rely on them to write our styles. I am always reading up on what’s coming for selectors and I was excited to read about an update to one that I’ve used a lot lately.

:not

the :not selector has been around for a while and incase you didn’t know about it beforehand it’s about as close to a conditional as we can get with raw css. Here’s an example:

.box h2:not(:first-of-type)

Which will target all of the h2’s in .box with the exception of the first one.

Or:

.box h2:not(.grand)

This will target all child h2’s of .box that don’t have the class of .grand.

You can see how this saves you from having to target the h2.grand and undo the styles applied to all h2’s.

What’s coming

With the latest update to the CSS selectors spec we can expect to see the option to pass multiple arguments!

.box :not(h2,h3,h4)

We can now target more than just one element at a time.

If you are writing a lot of CSS or SASS it’s a good idea to keep an eye on what’s happening with CSS. These types of updates, while small, will help improve your workflow dramatically.