What's new in CSS 4th level selectors?

This is a translation of the post " What's new in CSS selectors 4 ". It seemed interesting to me, and I decided to transfer it to Habrahabr. PS This is my first translation, do not judge strictly, and if you see any shortcomings and errors - please write in a personal, I will try to correct the errors. Further, according to the author.

Please keep in mind that this article describes the draft specification for January 2015, which means that the information contained in the article can be changed without notice.

The fourth-level CSS selectors are the next generation of the CSS specification, the latest version of which was released in 2011 , having been in draft for several years.
')
So what awaits us new?

SELECTOR PROFILES

CSS selectors are now divided into two groups: fast and full . Quick selectors are those selectors that are suitable for a dynamic CSS engine. The full group of selectors is suitable for use in situations in which fast data retrieval is not so important, for example, when using them through document.querySelector .

Selectors are used in a wide variety of contexts that vary greatly in speed characteristics. Unfortunately, some powerful selectors are too slow to use in performance sensitive contexts. To solve this problem, two selector specification profiles were created. [a source]

: HAS

: has is one of the most interesting parts of the specification of CSS level four selectors, but it is accompanied by an important warning, which will be discussed below. This selector allows you to specify which objects must be present inside the specified element in order for this rule to work in relation to it.

This opens up a lot of room for new options for specifying the desired items. For example, we can select all sections in which there are headings:

//  ,     section:has(h1, h2, h3, h4, h5, h6) 

Another option: the developer can select all paragraphs that contain images, or, conversely, only elements that are not images are present.

 //  ,    -,    p :has(img) //   :not(:has(:not(img))) //    -,    

You can even select those elements that have a certain number of descendants (in this example, five):

 //      div.sidebar :has(*:nth-child(5)) //    :not(:has(*:nth-child(6))) //    

Caution: Currently, the: has selector is not considered fast, which means it may not be available for use in style files. But, since no one has yet implemented this selector in practice, the question of its performance remains open. If browser developers can make its implementation fast, it is quite possible that it will be available for use as one of the main tools.

In the previous version of the specification, this section was marked with an exclamation mark and was called “select the subject of the selector” - it had a different syntax, which has now been abolished.

: MATCHES

: matches is a standardization: moz-any and: webkit-any, which for some time was present in browser prefixes . This allows the style author to combine similar rules. For example, this can be useful for combining output generated by SCSS / SASS, like this:

  body > .layout > .body > .content .post p a.image.standard:first-child:nth-last-child(4) ~ a.image.standard, body > .layout > .body > .content .post p a.image.standard:first-child:nth-last-child(4), body > .layout > .body > .content .post li a.image.standard:first-child:nth-last-child(4) ~ a.image.standard, body > .layout > .body > .content .post li a.image.standard:first-child:nth-last-child(4), body > .layout > .body > .content .page p a.image.standard:first-child:nth-last-child(4) ~ a.image.standard, body > .layout > .body > .content .page p a.image.standard:first-child:nth-last-child(4), body > .layout > .body > .content .page li a.image.standard:first-child:nth-last-child(4) ~ a.image.standard, body > .layout > .body > .content .page li a.image.standard:first-child:nth-last-child(4) { .... } 

in a somewhat more controllable option:

 body > .layout > .body > .content :matches(.post, .page) :matches(p, li) :matches(a.image.standard:first-child:nth-last-child(4), a.image.standard:first-child:nth-last-child(4) ~ a.image.standard), .... } 

The Mozilla documentation pages above are warnings about its performance. Since this selector will now become the standard, we hope to see the results of work on its performance, which will help make it easy.

: NTH-CHILD (AN + B [OF S])

While: nth-of-type has existed since the beginning of the millennium , fourth-level CSS selectors add the ability to filter based on a selector:

 div :nth-child(2 of .widget) 

The selector S is used to determine the index, and it does not depend on the selector to the left of the pseudo-class. As written in the specification, if you know the type of element in advance, the selector: nth-of-type can be converted to: nth-child (... of S), like this:

 img:nth-of-type(2) => :nth-child(2 of img) 

The difference between this selector and the: nth-of-type is small, but important. For: nth-of-type, each element — whether you specified a selector for it or not — has an implicit index for itself among its fellows with the same tag name. The expression: nth-child (n of S) creates a new counter every time you use a new selector.

This creates the potential for potential bugs in new selectors. Since the selector inside the pseudo-class: nth-child does not depend on the selector to its left, you can accidentally skip part of your request if you specify everything in the left selector as you should, but forget to specify everything you need inside: nth-child. For example:

 tr:nth-child(2n of [disabled]) 

This rule may not work as you would expect from it if other non-tr elements have the attribute "disabled".

In the previous version of the specification, this feature was called as a selector: nth-match.

: NOT ()

At a time when you used for a while: not, now you can list several arguments inside it to save several bytes and enter:

 //  : // :not(h1):not(h2):not(h3)... :not(h1, h2, h3, h4, h5, h6) 

DESIGN OFFICERS (>>)

Combinator of descendants is present in CSS from the very beginning in the form of a space (), but now it has an explicit version:

 //  : // p img { ... } p >> img { ... } 

The reason for adding this rule is to organize a bridge between the direct descendant (>) and the operator for the transparent DOM (>>>).

COLUMN COMBINATOR (||) AND: NTH-COLUMN

Fourth-level CSS selectors add column operations that allow style designers to more easily modify the design of certain columns in a table. The current approach to defining styles for tables requires the use of: nth-child, which does not always coincide with the columns of tables when using colspan attributes.

When using a new column combinator, you can style the table cells that are in the same column as the specified col element:

 //     C, E  G  // (    CSS- 4- ) col.selected || td { background: yellow; color: white; font-weight: bold; } <table> <col span="2"> <col class="selected"> <tr><td>A <td>B <td>C <tr><td colspan="2">D <td>E <tr><td>F <td colspan="2">G </table> 

As an alternative, the author can use: nth-column and: nth-last-column to style the cells. In any case, if a cell spans multiple columns, this selector will affect any of them.

: PLACEHOLDER-SHOWN

One small addition to the selector language is: placeholder-shown. It corresponds to an input element if and only if it displays text from its placeholder attribute.

: ANY-LINK

: any-link is another small addition. It is declared to match any of the properties: link or: visited.

 //  : // a:link, a:visited { ... } a:any-link { ... } 

FINDINGS

The fourth-level CSS selectors are still in development, but now there are useful selectors that we have reviewed and that can offer new styles and tools for defining styles to developers. There are other new selectors in the specification that I did not consider in this article related to accessibility, data validation, as well as scoped attributes in the style elements.

If you have a desire to play with these selectors, you must wait until browser developers catch up with the specification, or use some early implementations. : matches is available as: moz-any and: webkit-any, and WebKit’s nightly builds have early support for: nth-child selectors via flag activation .

Since this is a draft, the names of pseudo-classes are subject to change without notice. Watch the specifications for more details.