CSS 4: what's new?

You must immediately make a reservation that the document published on September 29th is called “Selectors Level 4”. Is this a draft CSS 4 spec? It is difficult to understand, although some have already managed to call the document by that name.

The question may immediately arise: but what, is CSS 3 finished, why should it be so "driven"? Recall that the process of approving new specifications has changed since CSS 2.1: instead of a single standard, the third version is a collection of documents called modules. Each develops independently of the second version, while maintaining backward compatibility, and then is approved as a recommendation. Usually modules do not rely on each other, although some have dependencies, for example, selector modules and namespaces.

Thus, work on the fourth version of the standard can go hand in hand with the development of the third version.

Consider the main innovations. Some of them are of great interest to the developer who wants to stay up to date with the development trends of the layout of the web document.



The specification of level 4 selectors already has a significant number of differences from level 3. Since this is only the first draft, the final result, bearing the status of a recommendation for implementation in browsers, is likely to differ significantly.

Some elements were added from other specifications, while others were not included in the selectors specification.

Pseudo-elements

The first thing that catches your eye - the specification does not contain pseudo-elements. Apparently in the future they will be described in other modules.

Pseudo-classes

User interface state pseudo-classes from the CSS 3: Basic User Interface module were added. Their values ​​describe the state of the GUI elements: the checkbox or its absence in the checkbox, whether the input is required or not, :read-writeand :read-only- the details necessary for configuring input forms in HTML5. Apparently, it was decided to collect in one module everything according to selectors except pseudo-elements.

Changes to Existing Selectors

In CSS 3, the negation pseudo- :notclass can only be applied to simple selectors: pseudo-classes, tags, identifiers, classes, and parameter selectors. Pseudo-elements and combinations such as ul lior were ul>linot supported, and the pseudo-class of denial could not be embedded :not(:not(...))in itself.

These restrictions are much weaker in CSS 4: the negation pseudo-class can now be applied to the list of selectors, to complex selectors. Pseudo-elements and nested negatives are still forbidden.

New pseudo-classes

There are several new elements created based on the wishes of webmasters and the achievements of the creators of browsers.

Match pseudo-class :matches()

:matches()very similar to the Mozillian pseudo-class :moz-any(). Its use is justified if it is necessary to select a large number of similar selectors. For example, instead of li a:link, li a:hover, li a:visited, li a:focusjust specifying li a:matches(:link, :hover, :visited). Complex selectors, attachments and use are :notprohibited.

Pseudo-class directivity :dir

The named pseudo-class allows you to select an element based on the direction of the text. The values ​​are listed rtl(from right to left; this is Arabic and Hebrew) and ltr(from left to right). Other values ​​are not invalid, but their actions are not set, which in the future will add new values ​​(probably, they will be from top to bottom and from bottom to top).

New pseudo-classes of hyperlinks

The pseudo-class :any-link()points to links regardless of their attendance. Once a visited link (pseudo-class :link) is not considered more unvisited, it is therefore necessary to enter a similar element, which could come in handy if you need to specify a single style for both states. The item is marked with the possibility of choosing the best name.

Local Link Pseudo-Class

:local-linkpoints to local links. When used simply :local-linkwithout an expression in parentheses, it will point to an element that points to the current page, that is, to exactly match the document URL without a fragment anchor. The number in parentheses indicates the number of matching elements in the HRM, for example, in the document the link www.example.com/foo/bar/baza:local-link(0)will point to the links on the same domain www.example.com, a:local-link(1)- domain and the first segment of the RLC www.example.com/foo, a:local-link(2)- domain and the first two segments in the RLC www.example.com/foo/bar.

Temporary Pseudo-Classes

There were three pseudo time-dependent: :past, :currentand :futurerelated to the time-dependent reproduction or strip of time, ie with means-speech HTML-documents. Accordingly, it :currentwill indicate the element being processed, which makes it possible to select the fragment that is being played now, :pastwill indicate elements that have already been processed in the past, and :futurewill highlight elements that will be processed in the future. There :currentis a version that takes values ​​in parentheses.

New pseudo-classes of element trees

The document describes two new similar pseudo-classes: :nth-matchand :nth-last-match, the input values ​​of which coincide with :nth-childand :nth-last-child: the same expressions an + b, as well as keywords or a selector string that allows you to select a subset of the results. From the specification, understanding an idea is not as easy as an example. Suppose there is a selector button:nth-match(even of .active). In contrast to it, it will button:nth-child(even)first determine a subset of elements with a class active, and only then it will separate even elements.

Pseudo-classes of table structure

This :column(), :nth-column()and :nth-last-column. In HTML, cells are listed in a row and separated by a tag tr, and the ratio of a cell to a column is implied by the order of listing. Therefore, to set the style of a cell based on its belonging to a column, a pseudo-class is introduced :column, which can be applied to one or more selectors. The following example from the draft will set the cells to yellow C, Eand D:

: column (col.selected) {background: yellow; }
A 
B 
C
  
D 
E
  
F 
G

Draft :nth-column()and :nth-last-columnaccept arguments in the same way as existing :nth-childor :nth-last-child, that is, numerical values, expressions of the form an+b, values evenand odd. For example, :nth-column(odd)selects all cells belonging to odd columns.

Ancestor selector or object selector

If the need for the previous elements sometimes seems far-fetched, then it was proposed to introduce the next element a long time ago.

CSS properties have always been applied to the last element in the list: it ul li.selectedwill indicate elements in the list that have the selected class. But there is no way to style the whole list based on the properties of the elements nested in it.

The draft also describes the way in which you can choose which element you want to apply properties to. At the moment, the dollar sign is selected by the pointer that is proposed to be added to the desired item $, although discussions are possible on the mailing list.

Suppose you need to set a list style that has an element with a class selected. An object selector will easily allow you to do this:

$ul li.selected {
background: white;
}

This is the current draft of the document “ Level 4 Selectors, ” the state of which can and will undergo significant changes, and it is still difficult to understand the whole meaning of individual fragments.

Based on publications by David Story , a member of the W3C working group, and Scott Gilbertson , author of Webmonkey.com.