CSSセレクターのリファレンス。 これには、CSSセレクターレベル3（CSS3）の新しいセレクターが含まれます。

ユニバーサルセレクター： *

すべてを選択します。

ルート要素セレクター：：root

ルート要素を選択します。 すべての要素はルート要素の子孫であり、ほとんどの場合、 エレメント。

タイプセレクター： h2

タイプのすべての要素を選択します。

IDセレクター： #myEl

指定されたIDを持つ要素を選択します。

クラスセレクター： .btn-xl

指定されたクラスのすべての要素を選択します。

属性セレクター

単純な属性セレクター：[ターゲット]

指定された属性を持つ要素を選択します。

属性と値のセレクター： [target =“ _ blank”]

指定された属性と値を持つ要素を選択します。

属性と多くの値の1つ： [class〜=“ large”]

値が空白で区切られた値のリストの一部である場合に要素を選択します。

属性と値の始まり： [target ^ =“ _ b”]

指定された文字列で始まる属性の値を持つ要素を選択します。

属性と値の終わり： [target $ =“ nk”]

属性の値が指定された文字列で終わる要素を選択します。

属性と値の一部： [target * =“ lan”]

属性の値に指定された部分文字列が含まれている要素を選択します。

ハイフンで区切られた値のリストの属性と一部： [lang | =“ zu”]

値がハイフンで区切られたリストの左側にある場合に要素を選択します。

子孫セレクター：h2スパン

左側の要素の子孫である場合は、右側に提供されている要素を選択します。

子セレクター： div> p

左側の要素の直接の子である場合は、右側に提供されている要素を選択します。

隣接する兄弟セレクター： div + p

左側の要素の直前にある場合は、右側にある要素を選択します。

一般的な兄弟セレクター： div〜p

左側の要素が前にある場合は、右側にある要素を選択します。

否定セレクター：：not（.first-par）

括弧内の単純なセレクターと一致しない要素を選択します。

疑似要素

::疑似要素の前： p :: before

要素の前に生成されたコンテンツ。

::疑似要素の後： p :: after

要素の後に生成されたコンテンツ。

::最初の文字の疑似要素： p::最初の文字

要素の最初の文字。

::最初の行の疑似要素： p::最初の行

要素の最初の行。

構造的疑似クラス

n番目の子（n）： span：nth-child（5）

提供されたタイプの場合、n番目の兄弟を選択します。

n番目の最後の子（n）： p：n番目の最後の子（4）

最後の子から数えて、指定されたタイプの場合はn番目の兄弟を選択します。

nth-of-type（n）： span：nth-of-type（2）

同じタイプのみをカウントして、n番目の兄弟を選択します。

nth-last-of-type（n）： span：nth-last-of-type（3）

最後の子から数え、指定されたタイプのみを数えて、n番目の兄弟を選択します。

ファーストチャイルド： span：first-child

指定されたタイプの要素と一致する場合、親の子の最初の子を選択します。

最後の子： span：last-child

指定されたタイプの要素と一致する場合、親の子の最後を選択します。

ファーストオブタイプ：スパン：ファーストオブタイプ

親内で提供されたタイプの最初のものを選択します。

last-of-type： span：last-of-type

親内で指定されたタイプの最後のものを選択します。

一人っ子： span：only-child

親要素の唯一の子である場合は、要素を選択します。

タイプのみ：スパン：タイプのみ

親要素内のタイプの要素が1つしかない場合は、要素を選択します。

空： div：empty

子のない要素を選択します。

まだアクセスされていないリンク。 リンクの開始点

訪問済み： a：訪問済み

訪問したリンク。

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

アクティブ： a：アクティブ

要素がアクティブなとき。

ホバー： a：ホバー

ユーザーのポインティングデバイスが要素の上にある場合。

フォーカス： a：focus

要素にフォーカスがある場合。 たとえば、ユーザーが入力フィールド内をクリックすると、フィールドにフォーカスがあります。

ターゲット疑似クラス： p：target

左側の要素がURLで定義された現在のターゲットである場合に選択されます。

lang疑似クラス：：lang（en）

指定されたlang属性を持つ要素。

UI状態の疑似クラス

有効： input：enabled

左側の要素が有効になっている場合。

無効：入力：無効

左側の要素が無効になっている場合。

チェック済み：入力：チェック済み

左側の要素がチェックされている場合。 タイプラジオまたはチェックボックスの入力に関連付けられています。

1つのCSS宣言で複数のセレクターをターゲットにするには、各セレクターの間にコンマを使用することに注意してください。 次の例では、すべてを選択します

を持たない要素記事パークラスとすべてを選択します

要素：

p:not(.article-par), h2 {
  font-weight: bold;
}

また、複数のクラスやIDの組み合わせをターゲットにして要素を選択する場合は、複数のクラスやIDの間にスペースを使用せずに、それらを簡単にメモできます。 たとえば、btnクラスとbtn-largeクラスを持つ要素を選択する場合は次のようになります。

.btn.btn-large {
  font-weight: bold;
}

上記の例では、セレクターを .btn .btn-large にしないでください。これは、の子孫である.btn-large要素を選択するためです。 .btn要素。

ここで、選択する要素のIDも＃main-btnであるとします。

#main-btn.btn.btn-large {
  font-weight: bold;
}