🧑‍🏫

CSS Selector Level4 ・ Nested Selector サンプル61個付きチートシート

2023/10/03に公開

2件

チートシート

css4

tech

全称セレクタ

*

ユニバーサルセレクタとも。すべての要素（範囲に名前空間セレクタの指定が可能）

使用例

/* 全ての要素の文字が赤色になる */
* {
  color : red;
}

論理セレクタ

A,B,C

セレクターリスト。A，B，Cいずれかに該当する要素を選択する。

使用例

/* h1要素とp要素の文字が赤色になる */
h1,p {
  color : red;
}

:is

セレクターのリストを引数に取り、リスト中のセレクターの何れか一つに当てはまる要素をすべて選択します。
擬似要素にはマッチしません。

使用例

/* 以下の3つのセレクタは */
article:hover h1, article:focus h1, article:active h1 {
  color: red;
}

/* :is() を使うと以下のように簡潔になる */
article:is(:hover, :focus, :active) h1 {
  color: red;
}

:not

引数に指定したセレクターに一致しない要素を選択する。

使用例

/* .excluded クラスを持たない .box 要素にスタイルを適用 */
.box:not(.excluded) {
    border: 5px solid blue;
}

:where

特定の条件を満たす要素を選択する。
:where の最大の特徴は、その中で指定されたセレクタの詳細度が0になることです。

使用例

/* :where 内のセレクタの優先度は0 */
:where(.exampleClass) {
  background-color: yellow;
}

:has

特定の要素が指定した子要素や子孫要素を持つ場合にその要素を選択する。
2023年10月の執筆時点において、Firefoxでは:hasは未サポートです。

使用例

div:has(> p) {
    background-color: red;
}

型セレクタ

E

HTML以下の E 要素。

使用例

span {
  color: red;
}
p {
  color: blue;
}
input {
  color: green;
}

名前空間セレクタ

名前空間セレクタは、XML文書の名前空間を指定して要素を選択するためのセレクタです。
HTML文書ではSVGやMathMLなどの名前空間を使用することができます。
正直なところHTML,SVG,Mathで共通して使うような形になる要素がないので、利用機会はほぼ存在しないため、そういうのもあるのか程度の理解でOKだと思います。

なお、HTML以下の要素については暗黙的に http://www.w3.org/1999/xhtml 以下のnamespaceに属している形になります。

namespace|E

名前空間 namespace 以下に属する E 要素。

＊|E

すべての namespace の以下に属する E 要素。

名前空間セレクタの使用サンプル

使用例

@namespace svg "http://www.w3.org/2000/svg";
@namespace math "http://www.w3.org/1998/Math/MathML";

span {
  color: red;
}

*|p {
  color: gray;
}

svg|text {
  fill: blue;
}
math|mi {
  color: green;
}

:difined

カスタムエレメントが定義されている場合にマッチします。この疑似クラスを使用すると、カスタムエレメントの定義がまだロードされていない場合にスタイルを適用することができます。

使用例

/* カスタムエレメントがまだ定義されていない場合 */
my-custom-element:not(:defined) {
  display: none; /* 非表示にする */
}

/* カスタムエレメントが定義されている場合 */
my-custom-element:defined {
  display: block; /* 表示する */
  background-color: lightblue; /* 背景色を設定する */
}

クラスセレクタ(class selectors)

E.boo

“boo”のclassをもつE要素

使用例

/* hogeクラスを持つものにヒットする。この書き方は *.hoge と等値になる */
.hoge {
  color: red;
}
.piyo {
  color: blue;
}
/* span要素がhogeクラスを持つものにヒットする */
span.fuga {
  color:green;
}

IDセレクタ（ID selectors）

E#boo

“boo”というidをもつE要素

使用例

/* *#sample1 と等価 */
#sample1 {
  color : blue;
}
/* 全称セレクタより型セレクタのほうが詳細度が高いので文字は赤色になる */
#sample2 {
  color: green;
}
p#sample2 {
  color : red;
}

属性セレクタ（Attribute selectors）

指定された属性が存在するかどうか、またはその値に基づいて要素を選択します。
全称セレクタと同様に名前空間の指定が可能です。

E[foo]

“foo” 属性を持つ E 要素。
条件は「指定の属性を持っているかどうか」であり、値は何でもOK。

使用例

p[title] {
  color : red;
}

E[foo="bar"]

“foo” 属性が”bar”の値である E 要素。

使用例

p[title="hoge"] {
  color : red;
}

E[foo~="bar"]

“foo” 属性が空白区切りの値であり、その中の値の1つが”bar”であるE要素。

使用例

p[class^="hoge"] {
  color : red;
}

E[foo^="bar"]

“foo” 属性が”bar”で始まる E 要素。

使用例

p[class^="hoge"] {
  color : red;
}

E[foo^=”bar”]

“foo” 属性の値が”bar”から始まるE要素。

使用例

p[class^="hoge"] {
  color : red;
}

E[foo$=”bar”]

“foo” 属性の値が”bar”で終了するE要素。

使用例

/* リンク先が.phpで終わるかどうか */
a[href$=".php"] {
  color : red;
}

E[foo*=”bar”]

“foo” 属性の値に”bar”を含むE要素。

使用例

/* リンク先がgoogle.comの文字列を含んでいるかどうか */
a[href*="google.com"] {
  color : red;
}

E[foo|=”bar”]

“foo” 属性の値がハイフン区切りの値をとり、その値が “bar” から始まる E 要素。

使用例

a[hreflang|="en"] {
  color : red;
}

疑似クラス

擬似クラスは、特定の状態にある要素を選択するセレクタです。

:root

ルート要素。
:root セレクタのほうが優先度は高いけれども、選択範囲は　html と等価。

使用例

:root {
  background-color: red;
}
html {
  background-color: blue;
}

グローバルのCSS変数を宣言するために使用するときに便利。（MDNより引用）

使用例

:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}

E:nth-child(an+b)

n 番目の子であるE要素
最初の子要素のインデックスは1。
n はその要素が何番目であるかであり、正の整数もしくは0の値を取る。
a と b の値は整数 (正、負、もしくは0) でなければなりません。

an+bではなく、‘odd’ や ‘even’ という引数を取ることもできる。
‘odd’ は 2n+1（奇数を現す）と同じ意味を持ち、また ‘even’ は 2n（偶数を現す）と同じ意味を持ちます。

使用例指定した出現順の箇所にヒットさせる

/* 3つめのliにヒットする */
li:nth-child(3){
  background-color: red;
}
/*
<ul>
  <li>1</li>
  <li>2</li>
  <li>3 ヒットする</li>
  <li>4</li>
  <li>5</li>
</ul>
*/

使用例奇数の出現順の要素にヒットさせる1

.sample1 li:nth-child(odd){
  background-color: red;
}
/*
<ul class="sample1">
  <li>1 ヒットする</li>
  <li>2</li>
  <li>3 ヒットする</li>
  <li>4</li>
  <li>5 ヒットする</li>
</ul>
*/

使用例奇数の出現順の要素にヒットさせる2

/* 2n+1と等価 */
.sample2 li:nth-child(2n+1){
  background-color: red;
}
/*
<ul class="sample2">
  <li>1 ヒットする</li>
  <li>2</li>
  <li>3 ヒットする</li>
  <li>4</li>
  <li>5 ヒットする</li>
</ul>
*/

使用例偶数の出現順の要素にヒットさせる1

.sample1 li:nth-child(even){
  background-color: red;
}
/*
<ul class="sample1">
  <li>1</li>
  <li>2 ヒットする</li>
  <li>3</li>
  <li>4 ヒットする</li>
  <li>5</li>
</ul>
*/

使用例偶数の出現順の要素にヒットさせる2

/* 2nと等価 */
.sample2 li:nth-child(2n){
  background-color: red;
}
/*
<ul class="sample2">
  <li>1</li>
  <li>2 ヒットする</li>
  <li>3</li>
  <li>4 ヒットする</li>
  <li>5</li>
</ul>
*/

使用例 3つごとに色を変える

li:nth-child(3n+1){
  background-color: red;
}
li:nth-child(3n+2){
  background-color: blue;
}
li:nth-child(3n+3){
  background-color: yellow;
}
/*
<ul>
  <li>あか</li>
  <li>あお</li>
  <li>きいろ</li>
  <li>あか</li>
  <li>あお</li>
  <li>きいろ</li>
</ul>
*/

サンプル1

サンプル2

E:nth-last-child(an+b)

後ろから数えて n 番目の子である E 要素。
カッコ内に取る引数の仕様はnth-childと同じ。

使用例指定の下から数えた出現順の箇所にヒットさせる

.sample1 li:nth-last-child(2){
  background-color: red;
}
/*
<ul class="sample1">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4 下から数えて2番目の要素がヒット</li>
  <li>5</li>
</ul>
*/

使用例下から数えて奇数の出現順の要素にヒットさせる1

.sample2 li:nth-last-child(odd){
  background-color: red;
}
/*
<ul class="sample2">
  <li>1</li>
  <li>2　ヒットする</li>
  <li>3</li>
  <li>4　ヒットする</li>
  <li>5</li>
  <li>6　ヒットする</li>
</ul>
*/

サンプル・使用例はnth-child(an+b)と同じなので省略します。

E:first-child

最初の子である E 要素
:nth-child(1) と等価

使用例

/* * p:first-child に等しい */
p:first-child {
  background-color: red;
}
/* DIV要素中の最初のp */
div > p:first-child {
  background-color: blue;
}

E:last-child

最後の子である E 要素
:nth-last-child(1) と等価。
ブラウザ拡張でDOMをappendするようなものがある場合に、last-childとして扱われる要素が変わることがあるので使用の際は留意。

使用例

/* * p:last-child に等しい */
p:last-child {
  background-color: red;
}
/* DIV要素中の最初のp */
div > p:last-child {
  background-color: blue;
}

E:nth-of-type(an+b)

同じ型をもつ要素のうち n 番目にある E 要素
カッコ内に取る引数の仕様はnth-childと同じ。

使用例

p:nth-of-type(2) {
  background-color: red;
}
p:nth-of-type(3) {
  background-color: blue;
}

E:last-of-type

同じ型をもつ要素のうち最後の E 要素
:nth-last-of-type(1) と等価

使用例

p:last-of-type {
  background-color: red;
}

E:only-child

唯一の子（兄弟になる要素が存在しない）である E 要素
:first-child:last-child および :nth-child(1):nth-last-child(1)　と等価

使用例

span:only-child{
  background-color: red;
}
a:only-child{
  background-color: blue;
}

E:only-of-type

同じ型をもつ要素が他にない、兄弟になる要素が存在しない E 要素
:first-of-type:last-of-type および :nth-of-type(1):nth-last-of-type(1)　と等価

使用例

span:only-of-type{
  background-color: red;
}

E:empty

テキストノードを含め子を持たない E 要素

使用例

div {
  width: 100px;
  height: 100px;
  background: red;
}

div:empty {
  background: blue;
}

リンク擬似クラス

E:any-link

リンク要素のうち、リンク先が指定されているもの。
href属性を持つものは<a>もしくは<area>タグのいずれかとなる。
is(:link, :visited) と同値となる。

使用例

:any-link {
  background-color: red;
}

E:link / E:visited

ハイパーリンクのアンカーである E 要素のうち、未訪問 (:link) であるもの、訪問済 (:visited) であるもの
:visitedはGoogle Chrome 6, Safari 5, Firefox 4, Internet Explorer 9 以降では色関連のプロパティ以外のプロパティは適用されない

使用例

a:link {
  color : red;
}
a:visited {
  color : green;
}

:local-link

現在は仕様提案の段階であり、サポートされているブラウザはありません
同じページ内のリンクのみに適用される要素。

使用例

a:local-link {
  color : green;
}

執筆現在、ブラウザ未サポートのためサンプルは省略します

:target

URLのフラグメント識別子（#）によって指定された要素。

使用例

div:target {
  background-color: yellow;
}

*:target::before {
  content: "今ここ🎯";
}

:target-within

現在は仕様提案の段階であり、サポートされているブラウザはありません
ターゲット要素自体が :target に一致するか、または :target に一致する子孫要素を含む要素

/*:target に一致する子孫要素を持つ div 要素*/
div:target-within {
  background: cyan;
}

執筆現在、ブラウザ未サポートのためサンプルは省略します

:scope

セレクターが選択する対象の参照点である要素。
カスタムエレメントのシャドウDOMにスタイルを適用する場合に使用します。

使用例

/* カスタムタグの中で使用すると便利 */
:scope p {
  background-color: red;
}

参考: JavaScriptでの :scope の活用例

ユーザーアクション擬似クラス

動作に対しての要素を選択できる擬似クラス。
排他的なクラスではないため複合して使用することができます。

E:hover

ユーザーがポインティングデバイスで示したE要素

使用例

a:hover {
  color : yellow;
}
div:hover {
  background-color: blue;
}

E:active

ユーザーによって実行されたE要素

使用例

a {
  color : red;
}
a:active {
  color : blue;
}

E:focus

ユーザーがフォーカスを当てたE要素
ほかのユーザーアクション擬似クラスと複合クラスとして使用できる

使用例


.sample1:focus {
  color : green;
}
.sample2:focus:hover {
  color : green;
}
.sample3:focus:link {
  color : red;
}
.sample3:focus:visited {
  color : yellow;
}

E:focus-visible

キーボードでフォーカスを当てたり、JavaScriptによりフォーカスを変更する制御を行う場合など、ユーザーがフォーカスの位置を知る必要がある場合にのみ、フォーカスされた要素にマッチします。

使用例

button:focus {
  /* マウス操作でフォーカスしたときにスタイリングされる */
  outline: 2px solid red;
  background: lightgrey;
}

button:focus-visible {
  /* キーボードのタブキーでフォーカスされたときにスタイリングされる */
  outline: 4px dashed darkorange;
  background: transparent;
}

E:focus-within

その要素または子孫要素にフォーカスがある場合にマッチする擬似クラス。

使用例

form:focus-within {
  background-color: yellow;
}

時間次元の擬似クラス /　リソース状態擬似クラス

ウェブビデオテキストトラック形式 (WebVTT) のスタイリングを行うための擬似クラス。
詳細については本記事では省略します。

要素の表示状態の擬似クラス

:open / :closed

「オープン」状態と「クローズ」状態の両方を持ち、現在の状態にある要素を表します。
ただしclosedは定義されていますが、執筆時点ではセレクタとして動作しません。

使用例


details {
  background-color: red;
}
details[open] {
  background-color: yellow;
}
/* 仕様書には定義されているがclosedはワークしない */
details[closed] {
  background-color: blue;
}

:modal

:modal疑似クラスは、破棄されるまでその外部の要素との対話をすべて排除する状態にある要素を表します。
これは dialog要素を showModal() で表示したときに適用されます。

使用例

dialog {
  width: 300px;
  border: solid 1px #000;
  padding: 10px;
}

dialog:modal {
  background: red;
}

:fullscreen

:fullscreen疑似クラスは、要素が全画面モードで表示されているときに適用されます。

使用例

#example {
  width: 100px;
  height: 100px;
  background-color: red;
}

#example:fullscreen {
  background-color: #a8c6ff;
}

::backdrop 疑似要素

::backdrop 擬似要素は、何らかの要素が全画面モード (top layer (en-US)) で表示される直下に直接表示される viewport の寸法のボックスです。
モーダルなdialogを表示したときや、Fullscreen APIで全画面モードに配置される要素になります。

:picture-in-picture

現在ピクチャインピクチャモードの要素に一致します。
ピクチャインピクチャとして使用されているブロック部分に適用されます。

使用例

:picture-in-picture {
  box-shadow: 0 0 0 5px red;
}

UI 要素状態擬似クラス

E:enabled ／ E:disabled

UI 要素である E のうち、有効 (:enabled) であるもの、無効 (:disabled) であるもの
なお、表示非表示（display、visibility）は有効無効に影響を及ぼさない。
また、HTML5 では、無効化されていないインタラクティブ要素を:enabledとして定義し、明示的に無効化されている要素を:disabledとして定義します。

使用例

input:enabled {
  background-color: red;
}
input:disabled {
  background-color: gray;
}

E:read-only ／ E:read-write

読み取り専用状態か、読み書き可能状態かのどちらかにある要素。
入力可能な要素以外に明示的に読み書き可能状態(contenteditable)に設定されていない場合、読み取り専用状態になります。

使用例

span:read-only
,p:read-only 
,input:read-only {
  background: gray;
}

span:read-write
,p:read-write
,input:read-write {
  background: yellow;
}

:placeholder-shown

プレースホルダーが表示されているinput要素またはtextarea要素。

使用例

input:placeholder-shown {
  border-color: red;
}

:autofill

<input> 要素の値がブラウザーによって自動補完された時に一致

使用例

input:autofill {
  border: 3px solid blue;
}

サンプルが手元環境でうまく動作しなかったため、動作例はMdNに移譲します。

:default

関連する要素のグループ内で既定となっているフォーム上の要素。
規定となっている、とは以下のいずれかの状態を指します。

既定の option 要素は selected 属性が付いた最初のもの、または DOM 順で最初の有効な選択肢。ただし、option要素にはCSSによるスタイリングがほとんど効かないため見た目の指定が意味をなさない場合があります。
<input type="checkbox"> と <input type="radio"> は checked 属性があるときに一致
フォームに所属する <button> のうち、 DOM 順で最初のもの

:checked

チェックされた (:checked) もの (チェックボックスやラジオボタンなど)

使用例

input[type="radio"]:checked + label,
input[type="checkbox"]:checked + label {
  color: red;
  font-weight: bold;
}

:indeterminate

未確定・チェックされていない (:indeterminate) 状態のもの (チェックボックスやラジオボタンなど)

使用例

input[type="checkbox"]:indeterminate {
  outline: 2px solid red;
}

:blank

現在は実験的な機能の段階であり、サポートされているブラウザはありません
入力値が空 (空の文字列または null 入力で構成される) であるユーザー入力要素

使用例

input:blank {
  border: 2px solid red;
}

執筆現在、ブラウザ未サポートのためサンプルは省略します

:valid / :invalid

内容物の検証に成功(valid)または失敗(invalid)した <input> 要素やその他の <form> 要素

使用例

input:invalid {
  border: 2px solid red;
}

input:valid {
  border: 2px solid green;
}

:in-range / :out-of-range

:in-rangeは現在の値が min および max 属性による制限範囲内にある <input> 要素を指し、:out-of-rangeは値が制限範囲外にある <input> 要素を指します。

使用例

input:in-range {
  border: 2px solid green;
}

input:out-of-range {
  border: 2px solid red;
}

:required / :optional

入力要素でrequired属性が付与されているもの(:required)、または付与されていないもの(:optional)。

使用例

input:required {
    border: 2px solid red;
}

input:optional {
    border: 2px solid green;
}

:user-valid / :user-invalid

ユーザーがフォームを送信した後に、フォームの内容が検証に成功した (:user-valid) か失敗した (:user-invalid) かを示します。
この疑似クラスは多くのブラウザでは現在実験的実装かサポートされていません。

使用例

input:user-valid {
    border: 2px solid green;
}

input:user-invalid {
    border: 2px solid red;
}

執筆現在、ブラウザ未サポートのためサンプルは省略します

結合子セレクタ

コンビネータとも称します。
結合子はセレクタを結合するために使用されます。

E F

子孫結合子。E 要素の子孫であるすべての F 要素

使用例

div p {
  color: red;
}

E > F

子結合子。E 要素の子であるすべての F 要素。

使用例

div > p {
  color: red;
}

E + F

隣接兄弟結合子。E 要素の直後に現れる F 要素

使用例

p + span {
  color: red;
}

E ~ F

一般兄弟結合子。E 要素のあとに現れる F 要素

使用例

h1 ~ p {
  color : red;
}

グリッド構造セレクタ

仕様書に定義れているグリッド構造セレクタに属するセレクタは現在実験的機能であり全ブラウザでサポートされていない状況のため、本記事では解説を省略します。

言語擬似クラス

:dir()

ドキュメント言語によって決定される方向性に基づいて要素を選択する。

使用例

:dir(ltr) {
  background-color: red;
}

執筆現在、Firefox以外のブラウザ未サポートのためサンプルは省略します

:lang()

指定された言語に基づいた要素を選択する。
特定の言語の読者に向けたスタイル調整や、言語に応じたタイポグラフィの変更などが可能になります。
:lang(A, B)のように記述することも可能ですが、firefoxとsafari以外ではサポートされていない記述方法のため、使用は推奨されません。

使用例

p:lang(en) {
    color: blue;
}

p:lang(fr) {
    color: red;
}

p:lang(ja) {
    color: green;
}

ネストセレクタ（&Nesting selectors）

ネストセレクタについてはCSS Nesting Moduleに定義されています。
ネストセレクタの構文は今までScssやLessなどのプリプロセッサでしか使用できませんでしたが、ネイティブCSSで使用できるようになりました。
ただしfirefox以外の多くのブラウザでは2023年現在においてまだ実験的サポートの段階ではありますが、全てのモダンブラウザで使用できるようになったことにより大きく利便性が向上することが期待されます。

構文にはSCSSなどと同様の＆結合子と結合子セレクタを用いることができます。

parentRule { childRule }

単純な入れ子のネストスタイル

使用例

.parent {
  color: blue;

  .child {
    color: red;
  }
}

/** 以下に変換される
.parent {
  color: blue;
}

.parent .child {
  color: red;
}
*/

&

&は現在のセレクタを参照するためのもので、親セレクタを参照することができます。

使用例

.btn {
  &-primary {
    background-color: blue;
  }
}

/** ↑の書き方は以下のように変換される
.btn-primary {
  background-color: blue;
}
 */

/* 擬似クラスへの使用 */
a {
  &::before {
    content: "→";
  }
}

/** ↑の書き方は以下のように変換される
a::before {
  content: "→";
}
*/

結合子セレクタの使用

前述の例ですでに暗黙的に使用されていますが、＋、>、~などの結合子セレクタを使用することができます。

使用例

.parent {
  color: blue;

  > .child {
    color: red;
  }
}

@ruleのネスト

@ルールのネストも可能です。

使用例

/* @media クエリ内のネスティング */
@media (max-width: 600px) {
    .container {
        & .item {
            padding: 0.25em;
        }
    }
}

@scope

@scope は、特定の要素のスコープ内でのみ適用されるスタイルを定義するためのものです。
これにより、特定の要素のコンテキスト内でのみスタイルを適用することができます。
この機能は、GoogleChrome118からサポートされる予定ですが、執筆時点での最新版は117であり、まだ全ブラウザでサポートされていない状態です。

使用例

.parent {
  color: blue;
  @scope (& > .scope) to (& .limit) {
    & .content {
      color: red;
    }
  }
}

執筆現在、ブラウザ未サポートのためサンプルは省略します

@layer

@layer はカスケードレイヤーを宣言します。
カスケードレイヤー内のルールは一緒にカスケードされます。CSSの「カスケーディング」とは、複数のスタイル規則がある要素に適用されるときにどの規則が優先されるかを決定するメカニズムを指します。
2023年10月現在、すでに多くのモダンブラウザで使用はできますが実験的機能の位置づけであり、また、定義としては CSS Cascading and Inheritance Level 5の定義となります。 https://drafts.csswg.org/css-cascade-5/#layering

使用例

@layer layer1, layer2;

@layer layer1 {
  .item1 {
    color: red;
    border: 3px solid green;
  }
}
@layer layer2 {
  .item1 {
    color: blue; /* 後から定義されたLayerのほうが優先される */
    padding: 12px;
  }
}

まとめ

チートシートと呼ぶにはあまりにも長い記事になりました。
以前CSS3のチートシートを作成していたのですが元の記事が消えてしまったため、
改めてCSS Selector Level4のチートシートを纏めたのですが、CSSのみで実現出来ることがより増えてきているという良い振り返りになりました。

パワフルなセレクタが増えた一方で、やはりCSSを書く上で大事にしなくてはならないこととしては、
セレクタをこね回して複雑な選択を実現するようなものは作らず、シンプルなセレクタに纏めるべきであると思っています。

現在CSSで実現できることを知識として押さえて、より効率的なスタイリングができるように心がけたい次第です。

変更履歴

2023/10/10 @layer の説明を追加

Discussion

urin

@layer?

ampersand_xyz

@layer 抜けてしまってました！追記します！

全称セレクタ

*

論理セレクタ

A,B,C

:is

:not

:where

:has

型セレクタ

E

名前空間セレクタ

namespace|E

＊|E

名前空間セレクタの使用サンプル

:difined

クラスセレクタ(class selectors)

E.boo

IDセレクタ（ID selectors）

E#boo

属性セレクタ（Attribute selectors）

E[foo]

E[foo="bar"]

E[foo~="bar"]

E[foo^="bar"]

E[foo^=”bar”]

E[foo$=”bar”]

E[foo*=”bar”]

E[foo|=”bar”]

疑似クラス

:root

E:nth-child(an+b)

E:nth-last-child(an+b)

E:first-child

E:last-child

E:nth-of-type(an+b)

E:last-of-type

E:only-child

E:only-of-type

E:empty

リンク擬似クラス

E:any-link

E:link / E:visited

:local-link

:target

:target-within

:scope

ユーザーアクション擬似クラス

E:hover

E:active

E:focus

E:focus-visible

E:focus-within

時間次元の擬似クラス / リソース状態擬似クラス

要素の表示状態の擬似クラス

:open / :closed

:modal

:fullscreen

::backdrop 疑似要素

:picture-in-picture

UI 要素状態擬似クラス

E:enabled ／ E:disabled

E:read-only ／ E:read-write

:placeholder-shown

:autofill

:default

:checked

:indeterminate

:blank

:valid / :invalid

:in-range / :out-of-range

:required / :optional

:user-valid / :user-invalid

結合子セレクタ

E F

E > F

E + F

E ~ F

グリッド構造セレクタ

言語擬似クラス

:dir()

時間次元の擬似クラス /　リソース状態擬似クラス