msasabing

セレクタ

CSS で主に使用されるセレクタの一覧です

CSS 1 ~ 2.1 セレクタ + CSS 3 セレクタ

セレクタ名称・分類 記述 解説
全称セレクタ
(ユニバーサルセレクタ)
* すべての要素に適用。
要素セレクタ
(タイプセレクタ)
A 要素名のみをセレクタとするもの。
指定されたタグすべてに適用。
IDセレクタ #id idが指定された要素に適用。
#(シャープ)に続く任意の名称をセレクタとするもの。
ひとつのHTML文書内でひとつの要素にのみ指定することが可能。
クラスセレクタ .class classが指定された要素に適用。
.(ピリオド)に続く任意の名称をセレクタとするもの。
ひとつのHTML文書内で複数の要素に指定することが可能。
属性セレクタ A[属性] A要素の属性が指定されているすべての要素に適用。
A[属性=”値”] A要素の属性と値が一致するすべての要素に適用。
A[属性~=”値”] A要素の属性の値が空白で区切られ複数指定されている場合、指定した値と一致する値があれば適用。
A[属性|=”値”] A要素の属性の値が-(ハイフン)で区切られ複数指定されている場合、指定した値の文字列で始まる値が含まれる要素に適用。
A[属性^=”値”] 属性の値が指定した値の文字列から始まっている場合に適用。
A[属性$=”値”] 属性の値が指定した値の文字列で終わる場合に適用。
A[属性*=”値”] 属性の値が指定した値の文字列を含む場合に適用。
子孫セレクタ A B Aタグ内に内包されるBタグすべてに適用
子セレクタ A > B A要素直下のすべてのB要素に適用
隣接セレクタ A + B A要素直後のB要素に適用
疑似クラス a:link 未訪問リンクに適用
a:visited 訪問済みのリンクに適用
A:hover マウスカーソルが重なっている時に適用
A:active アクティブ化した時に適用
A:focus フォーカスがある時に適用
A:target 移動先のターゲットに適用
A:lang() lang属性が指定された要素に適用
A:enabled 有効な要素に適用
A:disabled 無効な要素に適用
A:checked ラジオボタンやチェックボックスが選択された時に適用
A:indeterminate ラジオボタンやチェックボックスが不確定時に適用
A:root ルート要素に適用
A:first-child 最初の子要素に適用
A:last-child 最後の子要素に適用
A:nth-child(Xn) 連続するA要素のXの倍数行のみ適用
2n=偶数行
2n+1=奇数行
疑似要素
(CSS3 からは疑似クラスと区別するため“:”ではなく“::”を付けることになりました)
A::before { content: “B”; } Aの直前に追加される要素Bに適用
A::after { content: “B”; } Aの直後に追加される要素Bに適用
A::first-line A要素の最初の一行に適用
A::first-letter A要素の最初の一文字に適用