[Translation] Next generation selector: CSS4_html/css_WEB-ITnose

In January 2014, I wrote an article: The Current Generation of CSS3 Selectors. The purpose of this article is to introduce some new selectors in CSS3. The selector in this article has been well documented and is supported by most browsers (including IE9).

With the Selectors Level 4 specification currently in working draft status, and the Editor's Draft of the same spec also in progress (Editor's drafts are generally considered more authoritative), the future of CSS selectors looks clear Now,

This article focuses on new selectors that did not appear in the previous article. Browser support for these new features is not optimistic, so I do not recommend using these new selectors in a production environment. Think of this article as what impact it will have when the specification is further refined and browsers start to support CSS4. For features that are already supported, I have provided demo examples.

:read-only and :read-write

These two selectors are very simple. Any editable element is in the read-write state, and conversely, the element is in the read-only state. Take a look at the following HTML:

<input type="text" readonly><input type="text" disabled><input type="text"><div contenteditable></div>

The CSS is as follows:

:read-only {  outline: solid 1px blue;}:read-write {  outline: solid 1px red;}

The analysis of the above code is as follows:

• The first two elements have blue color outline, because in HTML, they are set to readonly and disabled respectively.
• The third element has a red outline because it is in its natural editable state (read-write). The default behavior of textarea is the same as that of all input elements.
• The last element (div) has a red outline because the contenteditable attribute is set.

In CSS, I use these two selectors normally (without applying them to any elements), which also means that all divs, spans and other non-editable elements will have The red outline is more likely to be used on specific form elements or elements with a specific class selector.

:read-write may be removed in the edit draft.

Browser support for :read-only and :read-write: Chrome, Opera, Firefox, Safari.

Note: As the demo below shows, browsers that support these selectors Defining an input element with disabled as read-write is incorrect according to the specification.

HTML:

<br /><br /><div class="c">  <h2>Demo for <code>:read-only</code> and <code>:read-write</code></h2>  This input is "readonly":  <input type="text" readonly>  <br> This input is "disabled":  <input type="text" disabled>  <br> This input is normal:  <input type="text">  <br>  <div class="ce" contenteditable>This div is contenteditable</div>    <div class="ro">This div has nothing special.</div>    <p><strong>Legend:</strong> Red outline: read-write; Blue outline: read-only</p>    <p class="p">Demo by Louis Lazaris. <a href="http://www.sitepoint.com/future-generation-css-selectors-level-4" target="_blank">See article</a>.</p>  </div>

CSS:

body {  line-height: 2em;}.c {  width: 600px;  margin: auto;}.p {  text-align: center;  font-size: .9em;  padding-top: 100px;}input:read-write, .ce:read-write, .ro:read-write {  outline: solid 1px red;}input:read-only, .ce:read-only, .ro:read-only {  outline: solid 1px blue;}

View this code on codepen

Default option pseudo-class: :default

< The 🎜>:default pseudo-class will match elements that are the default options in a related set. For example, a form's default submit button or the default selected button in a set of radio buttons.

As the following HTML snippet shows, there can be multiple default options:

<input type="checkbox" value ="f" name="group" checked> Fruits<input type="checkbox" value ="v" name="group"> Vegetables<input type="checkbox" value ="m" name="group" checked> Meats<input type="checkbox" value ="p" name="group" checked> Poultry<input type="checkbox" value ="n" name="group"> Nuts<input type="checkbox" value ="b" name="group"> Breads

Apply the following CSS to the above HTML:

input[type=checkbox]:default {  outline: solid 1px hotpink;}

In this case, all elements with the checked attribute will be rendered with an outline style.

Browser support for :default: Chrome, Opera, Firefox, Safari.

In this demo, although the default selected checkbox should have an outline, WebKit/Blink The browser does not apply outlines to checkboxes that are selected by default, which appears to be a bug. Firefox renders correctly.

HTML:

<br /><br /><div class="c">  <h2>Demo for <code>:default</code></h2>  <input type="checkbox" value="f" name="group"> Fruits  <input type="checkbox" value="v" name="group"> Vegetables  <input type="checkbox" value="m" name="group" checked> Meats  <input type="checkbox" value="p" name="group" checked> Poultry  <input type="checkbox" value="n" name="group"> Nuts  <input type="checkbox" value="b" name="group"> Breads  <form onsubmit="return false;">    <input type="submit">    <input type="submit">  </form>    <p>The items with a pink outline are in the "default" state. Chrome and Opera incorrectly fail to add the pink outline to the checkboxes.</p>    <p class="p">Demo by Louis Lazaris. <a href="http://www.sitepoint.com/future-generation-css-selectors-level-4" target="_blank">See article</a>.</p></div>

CSS:

body {  line-height: 2em;}.c {  width: 500px;  margin: auto;}.p {  text-align: center;  font-size: .9em;  padding-top: 100px;}input[type=checkbox]:default {  outline: solid 1px hotpink;}input:default {  outline: solid 1px hotpink;}

View this code in codepen

Validity pseudo-classes: :valid and :invalid

These two pseudo-classes are very useful in HTML forms. They can give users visual validity when entering data, which should be done by JavaScript.

Look at an example:

Email: <input type="email" required>

Note that this field expects a valid email address as the entered data, you can do this:

input[type=email]:invalid {  outline: red solid 1px;}input[type=email]:valid {  outline: lightgreen solid 1px;}

According to the above With CSS, the email field will have a red outline until the user enters it. Once the user enters a valid email, the outline will turn green.

Using these pseudo-classes, it is easy to add a green-tagged pseudo-element (or other similar) before the form element to display valid field data.

It should be noted that:

Interestingly, validity testing can also be applied to the form element itself to indicate that all field data is valid.
does not work for ordinary elements such as div and p, because these elements have no way to specify the expected data format.
An ordinary that does not require a specific data format is valid by default, but it is invalid if the require attribute is set but there is no data.

Browser support for :valid and :invalid: Chrome, Opera, Firefox, Safari, IE10.

HTML:

  
Demo for :valid and :invalid
  Email: <input type="email" required>    
Type an email address. The outline will change from red to green.
    
Demo by Louis Lazaris. See article.

CSS:

body {  line-height: 2em;}.c {  width: 500px;  margin: auto;}.p {  text-align: center;  font-size: .9em;  padding-top: 100px;}input[type=email]:invalid {  outline: red solid 2px;}input[type=email]:valid {  outline: lightgreen solid 2px;}

View this code on codepen

Range pseudo-classes: :in-range and :out-of-range

These two pseudo-classes are useful for those who require data between A range-specific form element is very useful. You can style the input box based on whether the element data is within a specified range.

So the HTML should look like this:

<input type="date"       min="1994-01-01" max="2015-03-01"       value="1993-01-01">

Note that the default value is "1993-01-01", which is not within the allowed range of the data. You can dynamically design the input box style based on the default data and input data, like this:

input[type=date]:in-range {  outline: lightgreen solid 1px;}input[type=date]:out-of-range {  outline: red solid 1px;}

It should be noted that:

• 能应用于number, datetime, datetime-local, month, week及其它允许范围的输入
• 支持range，但我不认为有一种方法能使range元素的数据超出范围，这种情况下，使用这两个伪类的作用是非常有限的。
• 和其它伪类一样，此伪类仅作用在有能力定义可接受的数据范围的元素

浏览器对 :in-range 和 :out-of-range支持：Chrome, Opera, Firefox, Safari.

HTML:

<br /><br /><div class="c">  <h2>Demo for <code>:in-range</code> and <code>:out-of-range</code></h2>  <input type="date" min="1994-01-01" max="2015-03-01" value="1993-01-01">  <p>This date field expects a date between "1994-01-01" and "2015-03-01". Change to a valid date to see the outline switch from red to green.</p>  <p class="p">Demo by Louis Lazaris. <a href="http://www.sitepoint.com/future-generation-css-selectors-level-4" target="_blank">See article</a>.</p></div>

CSS:

body {  line-height: 2em;}.c {  width: 500px;  margin: auto;}.p {  text-align: center;  font-size: .9em;  padding-top: 100px;}input[type=date]:in-range {  outline: lightgreen solid 1px;}input[type=date]:out-of-range {  outline: red solid 1px;}

View this code on codepen

可选择性伪类： :required 和 :optional

这两个伪类能让你基于表单字段是否需要填写来设计表单元素的样式。拿下面的HTML为例：

<div>  <label for="name">name:</label>  <input type="text" id="name" required>  <span class="msg"></span></div><div>  <label for="email">Email:</label>  <input type="email" id="email" required>  <span class="msg"></span></div><div>  <label for="address">Address:</label>  <input type="text" id="address">  <span class="msg"></span></div>

每个input后面添加了一个空的span元素，同时前面两个input元素是比填的，第三个是非必填的。CSS如下：

input:required ~ .msg:after {  content: '*';  color: red;}input:optional ~ .msg:after {  content: '(optional)';}

在这个示例中，我用兄弟选择器在紧跟每个必填字段的后面添加一个红色星号，非必填字段后添加 “optional”。

示例中使用了我额外添加的元素。如果你不喜欢，可以使用JavaScript动态添加或直接在input元素上使用其他样式，但是不能对表单的input元素使用伪类了，因而这种情况下你必须应用不同的样式。

浏览器对 :required 和 :optional的支持：所有浏览器.

HTML:

<br /><br /><div class="c">  <h2>Demo for <code>:required</code> and <code>:optional</code></h2>  <div>    <label for="name">Name:</label>    <input type="text" id="name" required>    <span class="msg"></span>  </div>  <div>    <label for="email">Email:</label>    <input type="email" id="email" required>    <span class="msg"></span>  </div>  <div>    <label for="address">Address:</label>    <input type="text" id="address">    <span class="msg"></span>  </div>  <p>The red asterisks and "(optional)" text are added via CSS, based on the presence or absence of the <code>required</code> attribute.</p>  <p class="p">Demo by Louis Lazaris. <a href="http://www.sitepoint.com/future-generation-css-selectors-level-4" target="_blank">See article</a>.</p></div>

CSS:

body {  line-height: 2em;}.c {  width: 500px;  margin: auto;}.p {  text-align: center;  font-size: .9em;  padding-top: 100px;}form div {  padding: 10px;}input:required ~ .msg:after {  content: '*';  color: red;}input:optional ~ .msg:after {  content: '(optional)';}

View this code on codepen

不区分大小写的属性选择器： i

在CSS中，默认对属性的大小写是敏感的。例如，要选择所有href属性的值以pdf结尾的元素，就不会选中其属性值以PDF结尾的。有一个很有用的新标记可以被添加到属性选择器中来覆盖这种行为：

a[href$="pdf" i] {  color: red;}

现在属性选择器将选择所有href链接到PDF文件的元素，不管.pdf扩展名是小写、大写还是混合写的。

浏览器对 i 的支持：Opera.

HTML:

<br /><br /><div class="c">  <h2>Demo for case-insensitive attribute selectors</h2>  <ul>    <li><a href="example.pdf" onclick="return false;">example.pdf</a></li>    <li><a href="example.PDF" onclick="return false;">example.PDF</a></li>    <li><a href="example.Pdf" onclick="return false;">example.Pdf</a></li>  </ul>      <p>In non-supporting browsers, only the first link is red. In supporting browsers, all links are red.</p>  <p class="p">Demo by Louis Lazaris. <a href="http://www.sitepoint.com/future-generation-css-selectors-level-4" target="_blank">See article</a>.</p></div>

CSS:

body {  line-height: 2em;}.c {  width: 500px;  margin: auto;}.p {  text-align: center;  font-size: .9em;  padding-top: 100px;}form div {  padding: 10px;}a[href$="pdf"] {  color: red;}a[href$="pdf" i] {  color: red;}

View this code on codepen

:blank伪类

[:blank]伪类和:empty有点类似，在The Current Generation of CSS3 Selectors一文中介绍了empty的用法。用empty可以选择没有子元素的元素，不管其子元素是一个元素、文本节点还是空白节点，因此如果元素即使只包含一个空格，也不被认为是"empty"的。

然而，:blank伪类将选择没有文本和其它子元素，包含空白的元素，它能包含空白、换行符等，这依然是有合格的。

HTML如下 :

<p></p><p> </p>

第一个段落是完全的空元素，但第二个有一个空白字符。CSS如下：

p:blank {  outline: solid 1px red;}p:empty {  border: solid 1px green;}

在这个示例中，对“blank”元素应用了红色的外轮廓，对 “empty”元素应用了绿色的边框。:empty仅选择第一个段落，因为它是完全的空元素；:blank则选择两个段落。

可能很难记住二者的差别，因为名字很相似，规范中也记录了一些问题，这个选择器可能会更名。

浏览器对 :blank的支持：没有浏览器支持。

Matches-any伪类: :matches()

:matches()伪类是使选择分组更简洁的一种方式，当浏览器对其的支持情况得到改善时，是对规范很有用的一个补充。

在MDN的一个示例中，CSS如下：

section section h1, section article h1,section aside h1, section nav h1,article section h1, article article h1, article aside h1, article nav h1,aside section h1, aside article h1,aside aside h1, aside nav h1,nav section h1, nav article h1, nav aside h1, nav nav h1, {  font-size: 20px;}

用:matches()，能将其简化：

:matches(section, article, aside, nav):matches(section, article, aside, nav) h1 {  font-size: 20px;}

简化的版本可以解释为：对这四个元素，如果h1在任意一个之内，并在任何相同的四个元素之内，则应用后面的规则。

需要注意的是：

• 以往的规范中是使用:any，需要添加-moz-和-webkit-私有前缀。
• 正如CSS-Tricks指出的，原则同选择器在预处理器中的嵌套规则。
• 该选择器的参数必须是一个”简单选择器“(不能是一个伪元素；除了子节点，不能使用连接符)

浏览器对 :matches()的支持：没有浏览器支持。但WebKit/Blink和Mozilla有等效的渲染选择。

相关伪类： :has()

:has() 伪类类似于JQuery中的.has()方法，但前者有更广泛的能力。看一个示例就清楚了。注意代码中的注释，它解释了每一个示例选择什么元素。

/* Section elements that contain a footer */section:has(footer) {  background: #ccc;}/* Any element containing a p element with a class of "alert" */:has(p.alert) {  background-color: red;}/* img element with paragraph immediately following. */img:has(+p) {  color: red;}/* list item with ul as a direct child */li:has(> ul) {  color: red;}

注意，:has()存在编辑草案中而不是工作草案中；也正如Ralph在评论中指出的那样，这个选择器仅能通过JavaScript才可用(类似querySelectorAll)，而不是CSS。规范说明

浏览器对 :has()的支持：没有浏览器支持。

超链接伪类： :any-link

:any-link选择器是为任何具有href属性指定样式的快捷方式，包括a、area和link元素等，也能按照下面的方式使用：

:link, :visited {  color: #555;}

作为代替，应该这样写：

:any-link {  color: #555;}

需要注意的是，在工作草案中有一个:local-link伪类，已经在编辑草案中被移除。

浏览器对 :any-link的支持：Chrome, Opera, 和Firefox(需要私有前缀)

输入焦点伪类： :focus-within

这是一个有趣的选择器,我可以明确地看到它是有用的。:focus-within不仅会选择获得焦点的元素，还会选择其父元素。

示例的HTML:

<div>  <label for="email">Email:</label>  <input type="email" id="email"></div>

CSS如下：

input:focus-within {  outline: yellow solid 1px;}

这不仅会导致获得焦点的input元素有黄色的外轮廓，其父元素div也有同样的外轮廓。

浏览器对 :focus-within的支持：没有浏览器支持。

拖放伪类： :drop 和 :drop()

在APPs中，拖放是很基础但又重要的功能。这两个选择器在改善用户体验上是很有价值的。
:drop选择器可以设置放置区样式（将要防止被拖动元素的地方），元素在用户的拖动期间是可放置的。

.spot {  background: #ccc;}.spot:drop {  background: hotpink;}

用户没有拖动时，.spot元素会有一个灰色背景；但当用户开始拖动.spot元素时，其背景色会改变，直到元素被放下。

:drop() 的值为下列中的一个或多个关键字：

• active:为被拖动的元素显示当前的放置目标
• valid:显示与被拖动元素相关联的放置目标是否有效
• invalid:和前一个相反，如果与被拖动元素相关联的放置目标无效则为其应用样式

应用多关键字将让事情更具体，如果没有给予参数，其行为和:drop一样。

注意：

• 工作草案规范有一组完全不同与此的伪类，因此这些选择器仍在变化中
• drop()是有"危险的"，有可能被移除

浏览器对 :drop 和 :drop()的支持：没有浏览器支持

提名奖

除了上面提到的，还有一些新特性我不打算细讲，但也值得简单提一下：
* 列连接符（||）:用于定义table和grid中的列和单元格之间的关系
* :nth-column()和:nth-last-column()伪类用于指定table和grid中的特定列
* attr()：属性节点选择器，是第一个非元素选择器
* 后代选择器由>>代替（而不仅是一个空格字符）
* :user-error伪类：为用户输入的数据不正确的文本框设置样式
* @namespace：定义命名空间
* :dir()伪类：根据方向来选择元素（如ltr）
* :scope伪类：为选择元素提供一个作用域或引用点
* :current, :past, 和 :future伪类：定义目标元素在时间进程上的样式，如一个视频字幕。
* :placeholder-shown伪类：定义表单元素中的占位符文本的样式

结束语和更多信息

正如之前提到的，这些功能非常新，并没有被很好的支持，仅展示了浏览器支持的信息和demos。

为了跟上进展，这里有一些关于CSS 4的资源：

• Selectors Level 4 Working Draft
• Selectors Level 4 Editor’s Draft
• CSS4 Rocks
• CSS4-Selectors
• Selectors Test

译文出处：http://www.ido321.com/1590.html

本文根据@Louis Lazaris的《The Future Generation of CSS Selectors: Level 4》所译，整个译文带有我自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://www.sitepoint.com/future-generation-css-selectors-level-4/