CSS3 was already something really cool. In version 4, or better saying, in level 4, as it will be divided from now, CSS has many more features. One of them is the :matches selector.
Using it, we could substitute something like that:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| div .highlight, | |
| footer .highlight { | |
| color: blue; | |
| } |
For that:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| p:matches(:first-child, .success) { | |
| color: green; | |
| } |