CSS Selectors Level 4
Not-so long ago I remember writing about CSS Selectors Level 3. Fast-forward 14 months, I'm now writing about the next specification of CSS that aims to improve and enhance CSS3 by introducing wide-range of new selectors and pseudo-classes.
There’s no such thing as CSS4, as pointed out by Tab Atkins on his blog. CSS3 is the current evolution of CSS, in which the recommendations are split into modules that can be progressed independently. Instead of there being a CSS4, the modules have levels, like Level 3, Level 4 etc.
The complete specification has a lot of new selectors, but a few of them run the risk of getting dropped before the specification reaches candidate recommendation. Following is the list of new selectors that I think, are going to be the most useful ones,
The relational pseudo class
:has() accepts a list of selectors as an argument to target those elements that contain
atleast one element from the list.
Multiple attribute selectors
Multiple attribute selectors can be used to represent several attributes of an element, or several conditions on the same attribute.
:dir() and :lang()
:dir() pseudo-class allows the author to write selectors that represent an element based on its
directionality as determined by the document language. The
:lang() pseudo-class represents an element
that is in one of the languages listed in its argument. It accepts a comma-separated list of one or more
language ranges as its argument.
The :empty pseudo-class represents an element that has no children at all.
:only-child pseudo-class represents an element that has no siblings at all. It is exactly same as
:nth-child(1):nth-last-child(1), but with a lower specificity.
Typed Child-indexed Pseudo-classes
Did you enjoy reading this article? I'd love to hear your thoughts. Shoot me an email or send me a tweet if you've got any comments.
‹ Back to Home