CSS セレクター
=========

**CSS セレクター**モジュールは、要素を選択するパターンを定義し、一連の CSS ルールをその`詳細度`とともに適用します。 CSS セレクターモジュールには、 60 以上のセレクターと 5 つの結合子が用意されています。他のモジュールは、さらに擬似クラスセレクターと擬似要素が提供されています。

CSS では、セレクターはスタイルを設定したい要素と照合、または選択するために使用されるパターンです。セレクターは JavaScript でも使用され、 `NodeList` として返すDOMノードを選択することができます。

セレクターは、 CSS でも JavaScript でも、 HTML 要素の型、属性、現在の状態、さらには DOM 内の位置に基づいてターゲットを絞ることができます。結合子は、他の要素との関係に基づいて要素を選択できるようにすることで、要素を選択する際により正確に行えるようにします。

リファレンス
------

### 結合子とセパレーター

* `+` （次兄弟結合子）
* `>` （子結合子）
* `||` （列結合子）
Experimental
* `~` （後続兄弟結合子）
* " " （子孫結合子）
* `|` （名前空間セパレーター (en-US)）
### セレクター

* `:active`
* `:any-link`
* `:autofill`
* `:blank`
* `:buffering` (en-US)
* `:checked`
* `:current` (en-US)
* `:current()` (en-US)
* `:default`
* `:defined`
* `:dir()`
* `:disabled`
* `:empty`
* `:enabled`
* `:first-child`
* `:first-of-type`
* `:focus`
* `:focus-visible`
* `:focus-within`
* `:fullscreen`
* `:future` (en-US)
* `:has()`
* `:hover`
* `:indeterminate`
* `:in-range`
* `:invalid`
* `:is()`
* `:lang()`
* `:last-child`
* `:last-of-type`
* `:link`
* `:local-link` (en-US)
* `:matches()` （旧式のセレクターで、 `:is()` の別名）
* `:modal` (en-US)
* `:muted` (en-US)
* `:not()`
* `:nth-child()`
* `:nth-of-type()`
* `:nth-last-child()`
* `:nth-last-of-type()`
* `:only-child`
* `:only-of-type`
* `:optional`
* `:out-of-range`
* `:past` (en-US)
* `:paused`
* `:picture-in-picture`
* `:placeholder-shown`
* `:playing`
* `:read-only`
* `:read-write`
* `:required`
* `:root`
* `:scope`
* `:seeking` (en-US)
* `:stalled` (en-US)
* `:target`
* `:target-within` (en-US)
* `:user-invalid`
* `:user-valid`
* `:valid`
* `:visited`
* `:volume-locked` (en-US)
* `:where()`
* `:-webkit-` 擬似クラス
* 属性セレクター
* クラスセレクター
* ID セレクター
* 要素型セレクター
* 全称セレクター
用語
--

* 擬似クラス（用語集の用語）
* 関数記法の擬似クラス
* 結合子
* 単純セレクター
* 複合セレクター
* 複雑セレクター
* 関連セレクター
* セレクターリスト
* 詳細度
ガイド
---

CSS セレクターと結合子

CSS セレクターと CSS 擬似モジュールで定義されている、さまざまな種類の単純なセレクターとさまざまな結合子の概要です。

CSS セレクターの構造

CSS セレクターの構造と、CSS セレクターモジュールで紹介されている用語について、「単純なセレクター」から「寛容な相対セレクターリスト」まで解説しています。

擬似クラス

擬似クラスは、文書ツリーには含まれない状態情報に基づいて要素を選択できるようにするセレクターの一覧で、さまざまな CSS モジュールや HTML で定義されています。

学習: CSS セレクター

CSS の構成要素の一部で、チュートリアルとして要素・クラス・ID によるセレクター、属性セレクター、擬似クラスと擬似要素、結合子、カスケード、詳細度、継承、カスケードレイヤーがあります。

セレクターでの `:target` 擬似クラスの利用

`:target` 擬似クラスを使って、 URL のフラグメント識別子をターゲット要素にスタイルを設定する方法を学びます。

学習: UI 擬似クラス

さまざまな状態のフォームをスタイル設定するために利用できる、さまざまな UI 擬似クラスについて学びます。

セレクターを使用した DOM 要素の特定

セレクター API を使用すると、 JavaScript でセレクターを使用して DOM から要素ノードを取得できます。

関連概念
----

* `:popover-open` 擬似クラス
* CSS nesting モジュール
    + : `&` nesting selector
* CSS scoping (en-US) モジュール
    + `:host` 擬似クラス
    + `:host()` 擬似クラス
    + `:host-context()` (en-US) 擬似クラス
    + `::slotted` 擬似要素
* CSS 擬似要素モジュール（HTML に含まれないものを表すために使用）
    + `::after`
    + `::before`
    + `::file-selector-button` (en-US)
    + `::first-letter`
    + `::first-line`
    + `::grammar-error`
    + `::marker`
    + `::placeholder`
    + `::selection`
    + `::spelling-error`
    + `::target-text`
* CSS シャドウ部品モジュール (en-US)
    + `::part` 擬似要素
* CSS 位置指定レイアウトモジュール
    + `::backdrop`
* その他の擬似要素
    + `::cue`
    + `::cue-region`
* `@namespace` アットルール
* `!important`
* 詳細度
* カスケード
* `Document.querySelector` メソッド
* `Document.querySelectorAll` メソッド
* `NodeList.forEach()` メソッド
仕様書
---

| Specification |
| --- |
| Selectors Level 4  |

関連情報
----

* CSS 擬似要素モジュール
* CSS カスケードと継承モジュール
* CSS 入れ子モジュール
* シャドウ DOM の使用