Intriguing CSS Level 4 Selectors

CSS selectors have grown massively over the years, giving developers much more power to target specific bits on their pages. The examples in this article are part of the CSS Selectors Level 4 specification. Let's dive and investigate seven of these intriguing selectors, which I guarantee you have not used in practice yet!

Level 4 Selectors

The Level 4 specification certainly contains well-known selectors such as nth-child but it also contains very unique characters. Much of the Level 4 specification describes many new and wonderfully useful pseudo-classes and pseudo-selectors, so on this topic, let's briefly review the difference between single and double-dots when it's 39 is pseudos in CSS.

Single against double Pseudo Colonists

As a general rule these days, double colonists :: should be used instead of 39. only one colon : to distinguish the pseudo-classes of the pseudo-elements and the content as the states of specification.

"This notation [double-colon] is introduced … in order to discriminate between pseudo-classes and pseudo-elements. Existing style, user agents must also accept the previous colon notation for the pseudo-elements introduced in CSS levels 1 and 2 (ie: first line, first letter: before and after). Is not allowed for the new pseudo-elements introduced in CSS level 3. "- Specification of W3C

Well, it is clear, but what is the difference between classes and elements

Pseudo-classes against pseudo-elements

A pseudo-class always consists of a "colon" : followed by the name of the pseudo-class (the keyword) And, for pseudo-functional classes, by one or more arguments in parentheses (similar to CSS functions). This is a method for authors to specify and target a special state of the selected element (s).

"Pseudo-classes allow you to apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors such as the history of the document. navigator ( : visited for example), the state of its contents (as : verified on certain form elements) , or the position of the mouse (as : hover that lets you know whether the mouse is on an item or not). "- MDN Web Docs

Pseudo-elements create abstractions on the document tree beyond those specified by the document language. For example, document languages ​​do not provide mechanisms for accessing 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 with a mechanism to reference content that does not exist in the source document, such as the famous :: before and : : after The pseudo-elements that allow access to the content generated in CSS 2.

Now that we have the logistics out of the way, let's explore some of these intriguing picks level 4 CSS.

1. : matches ()

The pseudo-class : matches () is certainly a powerful upcoming picker of level 4, but browsers still discuss its inclusion with the exception of Safari (WebKit).

In general, it can be used to combine multiple selector rules into a single succinct line. It accepts a list of selectors as argument. These arguments may be compound selectors and complex selectors however combinatorial selectors are not allowed.

While this excerpt combines all our states for : hover : focus and: active in a set of rules, it does not It's still not showing the potential that he has. We will review a more complex example to come:

If you are familiar with "nesting", get ready to drop your socks. The matches can be combined with other selectors : matches to mimic this same feature that many preprocessor users love, but since CSS!

If you are so inclined, you can even chain them to open another set of possibilities.

This example is the equivalent of writing:

Keep in mind that : matches () can not be nested (: matches ( : matches ()) ) and does not work with : no () (: matches (: no ()) : Not (: matches ()) ).

Unfortunately, the specifications of this selector have only been consolidated in Safari and are still waiting for other browser providers to support it. You will need to use separate declarations and prefixes from suppliers. Currently, tools like Autoprefixer do not support : matches () but are not afraid because I've recently submitted a problem on GitHub asking for this support.

If you have an example using this Chooser and would like to share, please post it in the comments below. We still love a tasty CodePen demo!

2. : placeholder-shown

Input items have the ability to display the text of the placeholder telling a user what needs to be seized in the entrance. This occurs when the placeholder attribute is present on the entry label and therefore corresponds to an entry element displaying the text of the entry. 39, placeholder.

Essentially : placeholder-shown is to select the entry itself when its placeholder text is displayed vs :: placeholder who is styling the placeholder text. There is actually documentation on: : placeholder noted in CSS Pseudo-Elements Module Level 4 Editors Draft . Keep in mind that : placeholder-shown is a pseudo class (this is an item in a particular state) and :: placeholder is a pseudo element (a visible thing that is not really in the DOM).

During my research, I discovered that color was a special property (used with : placeholder- to change the color of the text of the text. placeholder) that was honored only by Firefox, while Chrome and Safari retain the color of the gray placeholder text.

3. : any-link

The pseudo-class : any-link represents an element that serves as an anchor source of a hyperlink .

For example, in HTML5, all

or elements with an attribute href are hyperlinks that correspond : any-link and are equivalent to : matches (: link ,: visited ) . In my opinion, it's a very particular selector and is still waiting for a better name apparently, but support is pretty broad these days with the exception of Edge.

Autoprefixer currently supports this property and provides the appropriate vendor prefixes for browsers that need it.

4. : Undetermined

The pseudo-class : Undetermined is a selector for particular form items and applies to all the supports .

Generally, this selector corresponds to entries such as radio and checkboxes when there is no attribute checked . Entries such as these can exist with no checked or unchecked states.

He also selects elements as the element of progression without attribute of content (that is, when the percentage of 39, completion is unknown). Support is very stable at the present time on many widely used browser providers.

5. : user-error

The pseudo-class : user-error represents an entry element with incorrect entry, but only after The user interacted with her. For example, from the moment the user tried to submit the form and before the user again interacted with the form element.

However, the media is just not there and there is no way to know if this will be implemented by the major browser vendors. For the moment, it is better to use : Invalid or : Required if you need this type of error style for your web forms.

6. : Optional

The pseudo-class : Optional may be used when the value is valid and before the form to which it belongs is subject

It selects any entry element or textarea which n & # 39 does not have the attribute required present. This allows forms to easily indicate optional fields and stylize them accordingly.

This is one of the very poorly documented selectors included in the Draft Level 4 Selector specifications.

7. : scope

The pseudo-class : scope may limit style rules that apply only to part of a page defining the attribute extended on

  • Document 1
  • Document 2
  • Document 3
  • Unfortunately, most browsers do not support it, or have it done at any given time and have since completely deleted it. Although Chrome and Safari register a pseudo-class match and thus apply the CSS rule, they do not yet support the style definition itself. This means that the CSS rule applied extends beyond the intended part of the document and is equal to : root .

    Based on current research Chrome 35 and FF 55 removed support but there was a time when Chrome and Firefox supported : scope . All this back and forth is that the perspectives of the reach seem rather dark, and according to Can I Use most browsers currently have support behind a flag.

    There are certainly very promising selectors at level 4 and many others not mentioned in this article. As with anything in the specification form, some selectors might change slightly over time or be completely removed. It's up to us, as developers, to hang on to those we value most and to make sure that the responsible teams know about it. If you have questions or comments or even examples of the selectors mentioned above, please post them below. Happy coding!


    Leave a Reply

    Your email address will not be published. Required fields are marked *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.