ウェブランサー

CSSで使えるセレクタ

CSSで使えるセレクタ

CSSで使えるセレクタの種類には様々なものがありますが、全てを覚える必要はありません。必要に応じて後から少しずつ覚えていけば良いでしょう。

CSS2とCSS3で使用できるセレクタ一覧

パターン セレクタ名 説明
* ユニバーサルセレクタ 全ての要素にマッチ
E(要素名) タイプセレクタ Eという名称の要素にマッチ
E#id_name クラスセレクタ [id_name]というID名のE要素にマッチ
E.class_name クラスセレクタ [class_name]というクラス名のE要素にマッチ
E F 子孫セレクタ E要素の子孫であるF要素にマッチ
E > F 子供セレクタ E要素の子であるF要素にマッチ
E + F 隣接セレクタ E要素の直後にあるF要素にマッチ
E[foo] 属性セレクタ [foo]属性が設定されたE要素にマッチ
E[foo="bar"] 属性セレクタ [foo]の属性値が[bar]と完全に一致するE要素にマッチ
E[foo~="bar"] 属性セレクタ [foo]の属性が空白区切りで複数あり、その中の一つでも[bar]という値が含まれている場合のE要素にマッチ
E[hreflang|="en"] 属性セレクタ hreflang(lang)属性がハイフン区切りの前方一致でenの値のE要素にマッチ
E:link
E:visited
リンク擬似クラス [:link]はアンカーのリンク先が未訪問であるE要素に適用、[:visited]はリンク先が訪問済みのE要素にマッチ
E:hover
E:active
E:focus
ダイナミック疑似クラス [:hover]は、主にマウスカーソルがE要素の上に乗った時にマッチ。[:active]は、主に指定されたE要素のリンクをクリックした時にマッチ。[:focus]は、主にテキスト入力などでE要素がフォーカスされた場合にマッチ。
E:lang(en) 言語擬似クラス [en]という言語のE要素にマッチ
E:first-child :first-child疑似クラス ある要素の中に含まれる最初のE要素にマッチ
E:first-line :first-line疑似要素 E要素の最初の一行のみマッチ
E:first-letter :first-letter疑似要素 E要素の最初の一文字のみマッチ
E:before :before疑似要素 E要素の前に生成される内容にマッチ
E:after :after疑似要素 E要素の後に生成される内容にマッチ

CSS3で追加定義されたセレクタ一覧

パターン セレクタ名 説明
E ~ F 間接セレクタ E要素の後に出現するF要素にマッチ
E[foo^="bar"] 属性セレクタ 属性[foo]の値が[bar]と前方一致するE要素にマッチ
E[foo$="bar"] 属性セレクタ 属性[foo]の値が[bar]と後方一致するE要素にマッチ
E[foo*="bar"] 属性セレクタ 属性[foo]の値が[bar]と部分一致するE要素にマッチ
E:root :root疑似クラス ドキュメントのルート要素にマッチ
E:last-child :last-child疑似クラス ある要素内の中に含まれる最後のE要素にマッチ
E:nth-child(n) :last-child()疑似クラス ある要素内の隣接しているE要素で最初から[n番目]のE要素にマッチ
E:nth-last-child(n) :nth-last-child()疑似クラス ある要素内の隣接しているE要素で最後から[n番目]のE要素にマッチ
E:first-of-type :first-of-type疑似クラス 兄弟関係にあたるE要素の最初のE要素にのみマッチ
E:last-of-type :last-of-type疑似クラス 兄弟関係にあたるE要素の最後のE要素にのみマッチ
E:nth-of-type(n) :nth-of-type()疑似クラス 兄弟関係のE要素で最初から[n番目]のE要素にマッチ
E:nth-last-of-type(n) :nth-last-of-type()疑似クラス 兄弟関係のE要素で最後から[n番目]のE要素にマッチ
E:only-child :only-child疑似クラス ある要素内で子要素がE要素のみの場合にマッチ
E:only-of-type :only-of-type疑似クラス ある要素内で唯一のE要素にマッチ
E:empty :empty疑似クラス E要素の中が空の場合にマッチ
E:target ターゲット擬似クラス リンクで移動した先にあるE要素にマッチ
E:enabled
E:disabled
状態擬似クラス [E:enabled]要素が有効状態のときのE要素にマッチ
[E:disabled]要素が無効状態のときのE要素にマッチ
E:checked 状態擬似クラス チェック有効状態のE要素にマッチ
E:not(F) 否定擬似クラス E要素のうち、F以外のものにマッチ

CSSリファレンス

CSSって何? 初めての方はこちらからお読み下さい
CSSの書き方 CSSの書き方について基本的な解説です
CSSの特徴 CSSの特徴を理解して有効に活用しましょう
CSSで使えるセレクタ セレクタとはスタイルを適用する対象を指定するものです
CSSで使える単位 CSSで使える単位の一覧です
ブロックレベルとインライン ブロックレベル要素とインライン要素について詳しく解説
idとclassについて 要素にidとclassで名前を付ける
余白と外枠の関係 余白や外枠を指定する際のコツについて
DOCTYPE宣言・DOCTYPEスイッチ [!DOCTYPE]の使い方について
ユニバーサルセレクタ(*)について ユニバーサルセレクタ(全称セレクタ)を使えば全てのタグを一括で指定できます