CSS4: What Is There To Look Forward To?

Reading Time: 2 minute(s)

So it’s no secret that CSS4 is being drafted and worked on, but what new features are they developing? Well, I recently read an article by Jonathan Cutrell that highlighted a few of the Level 4 selectors we can look forward to having in our browsers one day, and it inspired me to find out more.

:placeholder-shown

This selects elements with placeholders that are currently visible. An example of this is if an <input> has a placeholder :placeholder-shown will be active until the user types something into the input.

:read-write & :read-only

These pseudo-classes apply to all elements. If the element can be manipulated by the user then the :read-write evaluates to true, so form controls and elements with the contenteditable attribute will match. Then, by default, all non-form elements will match :read-only.

:required & :optional

:read-write elements will match :optional unless they have the required attribute, then they will match :required

:default

This applies when a form control has a default value. Typically the selected option in a <select> or the default checked ‘radio’ button.

:matches

This pseudo-class allows for even more complex selectors to be passed in as arguments.
For example, to select descendants of a container that do not match .row but do have a class matching col we would do the following:
.container:matches(:not(.row).[class*="col"]) {}

CSS4 Selectors Summary

My absolute favourite future selector would have to be :matches – its like CSS meets excel, and yes, I love spreadsheets.

These new selectors are a welcome addition to an already powerful & awesome CSS selection engine that I am eager to see rolled out. However, most of them don’t yet exist beyond the draft phase and may be subject to enormous change, but it doesn’t hurt to start getting familiar 🙂

If this has whet your appetite and you want to know more, check out the spec on W3C: Selectors Level 4

%d bloggers like this: