Several pieces of wood stacked

CSS level 4: not selector

In CSS3 it was possible exclude an element of a selection. Something like that:

p:not(.highlight) {
  color: blue;

In the example above, we get all the p element except those which have the highlight class. It’s so nice, right? But if we wanted apply one more filter in the negation? It’s not possible. So, CSS level 4 give us this power.

p:not(:first-child, :last-of-type, .highlight) {
  color: blue;

In the example above, we can select all p elements excluding those which are :first-child, :last-of-type or that have the highlight class.

See the Pen :not selector by Raphael Fabeni (@raphaelfabeni) on CodePen.

Here the link with the example above.

Do you like it? Did I write something stupid? Do you want to improve? Open an issue mentioning the post and let’s talk about it.

See all posts...