In CSS3, it was possible to exclude an element of a selection. 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
| 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. But if we wanted to apply one more filter in the negation? It’s not possible. So, CSS level 4 gives us this power.
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:not(:first-child):not(:last-of-type):not(.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.
Here the link with the example above.