CSS selectors have progressed massively over the years, giving developers far more power for targeting specific bits on their pages. The examples in this article are part of the CSS Selectors Level 4 specification. Let’s dive in and investigate seven of these intriguing selectors, some of which I guarantee you’ve yet to use in practice!
Selectors Level 4
The Level 4 spec certainly contains some well-known selectors such as nth-child, but it also contains some very unique characters. Much of the Level 4 spec outlines many new and wonderfully useful pseudo classes and pseudo selectors, so on that subject, let’s briefly review what the difference is between single and double colons when it comes to pseudos in CSS.
Single vs. Double Pseudo Colons
As a general rule these days, double colons :: should be used instead of a single colon : to distinguish pseudo-classes from pseudo-elements and content as the specification states.
“This [double-colon] notation is introduced … in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in CSS level 3.” –W3C Specification
Okay, so that’s clear, but what’s the difference between classes and elements?
Pseudo-classes vs Pseudo-elements
A pseudo-class always consists of a “colon” : followed by the name of the pseudo-class (the keyword) and, for functional pseudo-classes, by one or more arguments between parentheses (similar to CSS functions). It’s a method for authors to specify and target a special state of the selected element(s).
“Pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on certain form elements), or the position of the mouse (like :hover, which lets you know if the mouse is over an element or not).” – MDN Web Docs
Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For example, document languages don’t offer mechanisms to access the “first letter” or “first line” of an element’s content. Pseudo-elements allow authors to refer to this otherwise inaccessible information.
Pseudo-elements also provide authors a mechanism to reference content that doesn’t exist in the source document such as the well-known ::before and ::after pseudo-elements that allow access to generated content in CSS 2.
Now that we have the logistics out of the way let’s dive in and explore a few of these intriguing CSS level 4 selectors.