CSS4 May Include Some Useful Pseudo Classes

The editor’s draft (emphasis on draft) for Level 4 Selectors from the W3C mentions some potential new pseudo selectors that the W3C describes as functional.

The matches-any Pseudo Class

This allows you to create a selector that targets a comma separated list of selectors. Here’s the syntax.

E:matches(selector1[, selector2, …]) {
    /* declarations */
}

For example

h1:matches(section, article, aside) {
    color: blue;
}

Another example, which selects a list of classes:

blockquote:matches(.pull, .feature, .break) { 
    color: blue; 
}

The negation Pseudo Class

The syntax:

E:not(negation-selector1[, negation-selector2, …]) {
    /* declarations */
}

In CSS3, only one selector was allow for this pseudo class. Now you can have a comma separated list as the syntax shows.

For example:

a:not([rel="prev"], [rel="next"]) {
    color: red;
}

The has Pseudo Class

This is a relational pseudo-class. It’s mentioned in the W3C draft document I mentioned, but it’s not mentioned in other places. I’m not sure if that means it’s brand new or was already discarded.

For example:

a:has(> img) {
     border: none;
}

That selector would remove a border from an <a> element that contain an <img> child.

Support?

You can check your efforts to work with these new CSS4 potential selectors using the test at css4-selectors.com. There’s also a list of all selectors from CSS1 to CSS4 on that site, but it does not mention the :has selector.