これは、「 CSSセレクター4の新機能 」 という投稿の翻訳です。 私には面白そうだったので、Habrahabrに転送することにしました。 PSこれは私の最初の翻訳であり、厳密に判断しないでください。欠点やエラーが見つかった場合は、個人的な手紙を書いてください。エラーを修正します。 さらに、著者によると。この記事では、2015年1月の仕様草案について説明しています。つまり、この記事の情報は予告なく変更される場合があります。4番目のレベルのCSSセレクターは次世代のCSS仕様で、最新バージョンは
2011年にリリースさ
れ 、数年間ドラフトモードでした。
それで、私たちは何を待っていますか？
セレクタープロファイル
CSSセレクターは、
fastと
fullの 2つのグループに分かれています。 クイックセレクタは、動的なCSSエンジンに適したセレクタです。 セレクターの完全なグループは、たとえば
document.querySelectorを使用してセレクターを使用する場合など、高速データサンプリングがそれほど重要ではない状況での使用に適してい
ます 。
セレクターは、さまざまなコンテキストで使用され、速度特性が大きく異なります。 残念ながら、一部の強力なセレクターは、パフォーマンスに敏感なコンテキストで使用するには遅すぎます。 この問題を解決するために、2つのセレクター仕様プロファイルが作成されました。 [ソース]
：は
：hasは、第4レベルのCSSセレクター仕様の最も興味深い部分の1つですが、重要な警告があります。これについては後で説明します。 このセレクタを使用すると、このルールが関連して機能するために、指定した要素内に存在するオブジェクトを指定できます。
これにより、必要な要素を指定するための新しいオプションの有効範囲が広がります。 例として、見出しが存在するすべてのセクションを選択できます。
// , section:has(h1, h2, h3, h4, h5, h6)
別のオプション：開発者は、画像が存在するすべての段落を選択できます。逆に、画像ではない要素のみが存在する場合もあります。
// , -, p :has(img) // :not(:has(:not(img))) // -,
特定の数の子孫（この例では5つ）を持つ要素を選択することもできます。
// div.sidebar :has(*:nth-child(5)) // :not(:has(*:nth-child(6))) //
注意：現時点では、：hasセレクターは高速とは見なされていません。つまり、スタイルファイルで使用できない場合があります。 しかし、実際に誰もこのセレクターをまだ実装していないため、そのパフォーマンスの問題は未解決のままです。 ブラウザ開発者が実装を高速化できれば、主要ツールの1つとして使用できる可能性があります。
仕様の
以前のバージョンでは 、このセクションは感嘆符でマークされ、「セレクターサブジェクト選択」と呼ばれていました-異なる構文があり、現在は削除されています。
：試合
：マッチは、moz-anyおよび：webkit-anyの標準化であり、しばらくの間
ブラウザのプレフィックスに
存在していました。 これにより、スタイル作成者は同様のルールを組み合わせることができます。 たとえば、これは次のようなSCSS / SASSで生成された出力を組み合わせるのに便利です。
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) { .... }
少し検証可能なオプションで：
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), .... }
上記のMozillaドキュメントページにそのパフォーマンスに関する警告があります。 このセレクターが標準になるので、そのパフォーマンスに関する作業の結果を見て、それが簡単になるのを期待しています。
：NTH-CHILD（AN + B [OF S]）
while：nth-of-typeは
千年紀の初めから存在し
ており 、第4レベルのCSSセレクターはセレクターに基づいてフィルタリングを実行する機能を追加します。
div :nth-child(2 of .widget)
Sセレクターは、インデックスを決定するために使用され、擬似クラスの左側にあるセレクターとは無関係です。 仕様に書かれているように、事前に要素タイプを知っている場合、次のように、nth-of-typeセレクターをnth-child（... of S）に変換できます。
img:nth-of-type(2) => :nth-child(2 of img)
このセレクターとnth-of-typeの違いは小さいですが、重要です。 nth-of-typeの場合、各要素（セレクタを指定したかどうかにかかわらず）には、同じタグ名を持つ兄弟間で暗黙的なインデックスがあります。 式：n番目の子（n個のS）は、新しいセレクターを使用するたびに新しいカウンターを作成します。
これにより、新しいセレクターでバグが発生する可能性があります。 疑似クラス：nth-child内のセレクターはその左側のセレクターに依存しないため、左側のセレクターですべてを指定した場合、誤ってクエリの一部をスキップできますが、内部で必要なすべてを指定することを忘れることがあります：nth-child 例：
tr:nth-child(2n of [disabled])
このルールは、他の非tr要素に「無効」属性がある場合、期待どおりに機能しない場合があります。
仕様の以前のバージョンでは、この機能はセレクターと呼ばれていました：nth-match。
：NOT（）
しばらく使用していましたが、今ではいくつかの引数をリストして、いくつかのバイトとタイプを保存できます：
// : // :not(h1):not(h2):not(h3)... :not(h1, h2, h3, h4, h5, h6)
ショックコンビネーター（>>）
子孫コンビネーターはCSSに最初からスペース（）として存在しますが、明示的なバージョンになりました：
// : // p img { ... } p >> img { ... }
このルールを追加する理由は、直接の子孫（>）と透過DOMの演算子（>>>）の間のブリッジを編成するためです。
カラムコンビネータ（||）および：NTH-COLUMN
4番目のレベルのCSSセレクターは、スタイルデザイナーがテーブル内の特定の列をより簡単に設計できるようにする列操作を追加します。 テーブルのスタイルを設定する現在のアプローチでは、nth-childを使用する必要があります
。nth -childは、
colspan属性の使用時にテーブルの列と必ずしも一致しません。
新しい列コンビネータを使用する場合、指定したcol要素と同じ列にあるテーブルセルのスタイルを設定できます。
// 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>
代わりに、著者は次を使用できます：nth-columnおよび：nth-last-columnセルのスタイル設定。 いずれにせよ、セルが複数の列にまたがる場合、このセレクターはいずれかの列に影響します。
：PLACEHOLDER-SHOWN
セレクター言語への小さな追加は、プレースホルダー表示です。 プレースホルダー属性からテキストを表示する場合にのみ、入力要素に対応します。
：任意のリンク
：any-linkはもう1つの小さな追加です。 ：linkまたは：visitedプロパティのいずれかに一致することが宣言されています。
// : // a:link, a:visited { ... } a:any-link { ... }
結論
第4レベルのCSSセレクターはまだ開発中ですが、現時点ではレビュー済みの便利なセレクターがあり、スタイルを設定するための新しいモデルとツールを開発者に提供できます。 仕様には、私には考慮されなかった
他の新しいセレクターがあります（記事の著者-約Per）。この記事では、アクセシビリティ、データ検証、およびスタイル要素のスコープ属性に関連しています。
これらのセレクターを試してみたい場合は、ブラウザーの開発者が仕様に追いつくまで待つか、初期の実装を使用する必要があります。 ：マッチは、moz-anyおよびwebkit-anyとして使用できます。WebKitのナイトリービルドは、
フラグアクティベーションによる nth-childセレクター
を早期にサポートしています。
これはドラフトであるため、擬似クラス名は予告なく変更される場合があります。 詳細については、
仕様に従ってください。