Ir para conteúdo

CSS level 4: matches selector

03/07/2016

A wooden box full of nuts

CSS3 was already something really cool. Now, in version 4, or better saying, in level 4, as it will be divided from now, CSS has much more features. One of them is the :matches selector.

Using it, we could substitute something like that:

div .highlight,
footer .highlight {
  color: blue;
}

For that:

:matches(div, footer) .highlight {
  color: blue;
}

In other words, we get every highlight class that are children of a div or footer.

We could even make the inverse way, as in the example below: we select all p elements that have the success class or that is first-child.

p:matches(:first-child, .success) {
  color: green;
}

See the Pen :matches 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 the posts