[翻訳] 次世代セレクター: CSS4_html/css_WEB-ITnose

2014 年 1 月に、私は「現行世代の CSS3 セレクター」という記事を書きました。この記事の目的は、CSS3 の新しいセレクターをいくつか紹介することです。この記事のセレクターは詳しく文書化されており、ほとんどのブラウザー (IE9 以降を含む) でサポートされています。

セレクター レベル 4 仕様は現在作業ドラフトのステータスにあり、同じ仕様の編集者ドラフトも進行中 (一般に編集者のドラフトの方が権威があると考えられています)、CSS セレクターの将来は明らかです。

この記事は以下に焦点を当てています。前の記事では取り上げられなかった新しいセレクター。これらの新機能に対するブラウザのサポートは楽観的ではないため、運用環境でこれらの新しいセレクターを使用することはお勧めしません。この記事は、仕様がさらに洗練され、ブラウザーが CSS4 をサポートし始めたときにどのような影響を与えるかについて考えてください。すでにサポートされている機能については、デモの例を提供しています。

:read-only と :read-write

これら 2 つのセレクターは非常に単純です。編集可能な要素は読み取り/書き込み状態になり、逆に、要素は読み取り専用状態になります。以下の HTML を見てください:

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

CSS は次のとおりです:

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

上記のコードの分析は次のとおりです:

• 最初の 2 つの要素の外側のアウトラインは青色です。これは、HTML では次のように設定されているためです。それぞれ読み取り専用と無効になります。
• 3 番目の要素は、自然な編集可能状態 (読み取り/書き込み) にあるため、赤い枠線で表示されます。 textarea とすべての入力要素のデフォルトの動作は同じです。
• contenteditable 属性が設定されているため、最後の要素 (div) は赤い枠で囲まれています。

CSS では、これら 2 つのセレクターを通常 (要素に適用せずに) 使用します。これは、すべての div、span、およびその他の編集不可能な要素が赤いアウトラインを持つことも意味します。つまり、特定のフォーム要素または特定のクラスのセレクターを持つ要素。

:読み書きは編集ドラフトで削除される可能性があります。

:read-only および :read-write のブラウザ サポート: Chrome、Opera、Firefox、Safari。

注: 以下のデモが示すように、これらのセレクターをサポートするブラウザは、無効な入力要素の定義を読み取り/書き込みに対して設定します。ただし、仕様によれば、これは正しくありません。

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;}

このコードを codepen で見る

デフォルト オプション擬似クラス: :default

:default 擬似クラスは、関連セット内のデフォルト オプションである要素と一致します。たとえば、フォームのデフォルトの送信ボタンやラジオ ボタンのセットでデフォルトで選択されたボタンなどです。

次の HTML スニペットが示すように、複数のデフォルト オプションが存在する可能性があります:

<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

次の CSS を上記の HTML に適用します:

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

この場合、checked 属性を持つすべての要素がアウトライン スタイルでレンダリングされます。

:default: Chrome、Opera、Firefox、Safari のブラウザサポート

このデモでは、デフォルトで選択されているチェックボックスにはアウトラインがあるはずですが、WebKit/Blink ブラウザはデフォルトでは選択しません チェックボックスはアウトラインを適用します。バグになる。 Firefox は正しくレンダリングされます。

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;}

このコードを codepen で表示します

有効性疑似クラス: :valid と :invalid

これら 2 つの疑似クラスは、HTML フォームで非常に役立ち、ユーザーに視覚的な効果を与えることができます。データの入力は JavaScript で行う必要があります。

例を見てください:

Email: <input type="email" required>

データの入力時にこのフィールドには有効な電子メール アドレスが必要であることに注意してください。次のようにすることができます:

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

上記の CSS によると、ユーザーが入力する前に、電子メール フィールドには赤い輪郭。ユーザーが有効な電子メールを入力すると、輪郭が緑色に変わります。

これらの疑似クラスを使用すると、有効なフィールド データを表示するためにフォーム要素の前に緑色のマークが付いた疑似要素 (またはその他の同様のもの) を簡単に追加できます。

注意すべき点:

• 興味深いことに、フォーム要素自体に有効性テストを適用して、すべてのフィールド データが有効であることを示すこともできます。
• div や p などの通常の要素では機能しません。これらの要素には、予期されるデータ形式を指定する方法がないからです。
• 特定のデータ形式を必要としない通常の 23efcc05e98690ceeb219581933e4231 はデフォルトで有効ですが、require 属性が設定されているがデータがない場合は無効になります。

ブラウザの:valid および :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;}

このコードを codepen で表示

Range 疑似クラス: :in-rangeと :out-of-range

これら 2 つの疑似クラスは、データが指定された範囲内にある必要があるフォーム要素に非常に役立ちます。要素データが指定された範囲内にあるかどうかに基づいて、入力ボックスのスタイルを設定できます。

HTML は次のようになります:

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

デフォルト値は「1993-01-01」であり、データの許容範囲内にないことに注意してください。次のように、デフォルト データと入力データに基づいて入力ボックス スタイルを動的にデザインできます:

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

次の点に注意してください:

• 能应用于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/