CSS selector 4 is the next generation CSS selector specification, css Selector

CSS selector 4 is the next generation CSS selector specification, css Selector

 

So what are the new things of this version?

Selector configuration file

CSS selectors are divided into two types: Quick selectors and complete selectors. The quick selector is suitable for dynamic CSS engines. The complete selector is applicable to situations where speed does not take precedence, such as document. querySelector.

The selector has different contexts and plays different roles. Some powerful selectors are too slow to adapt to high-performance environments. To achieve this, you need to define two configuration files in the selector specification [see].

: HAS

: The has selector is the most interesting part of the fourth generation selector, but it has an important warning, which will be described below. It allows you to change the selection object of the selector, that is, the specific elements actually assigned to the style, and it will continue to match the elements that appear later. It opens up many new methods for matching context. For example, match a header:

12	// Any part of a head Elementsection:has(h1, h2, h3, h4, h5, h6)

Alternatively, developers can match paragraphs that only contain a certain number of images:

1234	// Sidebar and five subclassesdiv.sidebar    :has(*:nth-child(5) // Has5Child classes    :not(:has(*:nth-child(6) // But does not have6Child classes

You can even match the number of elements that contain a specific subclass (five in this example ):

123	// Match a paragraph that is full of images  : Has (img) // has an image  : Not (: has (: not (img) // all content is an image

Warning: The has selector is not as fast as you can imagine, which means it cannot be used in the style sheet. Since no one has implemented this selector yet, its performance features have yet to be studied. If the browser keeps up with it, it will soon be used for general styles.

An exclamation point (!) will be added next to the topic in earlier versions (!) Indicates a warning, but no more.

: MATCHES

: Matches is the standardized selector of moz-andy and webkit-any. It has been co-existent with the browser prefix for a while. It allows the style sheet creator to delete duplicate rule paths.

It is used to sort out a SCSS/SASS output similar to Cartesian-product-esque. For example:

12345678910

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) {       ....  }

You can output the following easy-to-maintain style:

1234567

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 above Mozilla reference page lists some performance considerations. Since this selector is committed to becoming a standard, we hope to see more performance-related work to make it lighter.

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

Although nth-of-typey already exists since the turn of the century, the fourth generation selector adds a filter function:

1	div :nth-child(2 of .widget)

Selector S is used to determine the index, which is independent of the selector on the left of the pseudo class. As mentioned in the Specification, if you know the element type in advance, you can convert the: nth-of-type selector to: nth-child (... Of S), such:

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

The difference between this selector and: nth-of-type is subtle but important. For nth-of-type, whether or not a selector is added to an element, it adds an implicit index to the content with the same tag. Every time you use a new selector, nth-child (n of S) will add 1 to the counter.

This selector has potential defects. Because the selector in the nth-child pseudo class is independent of the selector on the left. If you create a parent selector on the left that is not: nth-child, you may miss something in the field. For example:

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

: NOT ()

You may have used it: not for a while. You can pass multiple parameters to save the size and manually enter it.

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

Descendant operator (>)

In early CSS, the descendant selector serves as a () space, but now the role is more obvious:

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

This method is used to associate the direct descendant (>) and shadow DOM (>>>) operators.

Column delimiter (|) and: NTH-COLUMN

CSS4 adds the column operation function so that developers can easily design Individual columns in a table. Currently, you need to use nth-child to design the table. Therefore, you do not need to use the colspan attribute to match the columns in the table.

By using the new column Composite (|), you can use <col> to mark the same columns in the table and design the cells in the column:

123456789101112131415

// In the following example, the cells C, E, and G are yellow.// The example is from the CSS selector.4Specificationscol.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>

In addition, style sheet designers can also use: nth-column and: nth-last-column to design cells.

In both cases, if a cell spans multiple columns, it can match any selector in these columns.

: PLACEHOLDER-SHOWN

A placeholder-shown is added to the selector specification. It matches an input element only when the placeholder attribute text is visible.

: ANY-LINK

Another small change is any-link. Its function is to match any content that can be matched by link and: visited.

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

Conclusion

Selector in CSS4 is still under research, but we can see that there are many useful selectors that provide developers with new modes and tools to facilitate their design. There are also other new selectors in the specification, which are not mentioned in their concepts such as access, validity test, and style scope definition.

If you want to test these selectors, you have to wait until a compatible browser appears, or try earlier versions, such as moz-any and webkit-any: matches is the same. WebKit supports the nth-child selector in the early stage.

Because this is the author's draft, the name of the pseudo class may change. For more information, see the CSS 4 selector specification.

If you have any suggestions, please @ mmastrac on Twitter to let me know.