トップ > スキル : Web > CSSセレクタの記述方法

Web

CSSセレクタの記述方法4

CSS2セレクタ一覧

セレクタ名 パターン 説明
ユニバーサルセレクタ * すべての要素に適用
タイプセレクタ E E要素に適用
一意セレクタ E#myid myidというID名のE要素に適用
クラスセレクタ E.box boxというクラス名の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"] (href)lang属性がハイフン区切りの前方一致でenの値のE要素に適用
リンク疑似クラス E:link
E:visited
:linkが未訪問のE要素に適用
:visitedが訪問済みのE要素に適用
ダイナミック疑似クラス E:active
E:hover
E:focus
ユーザが特定のアクションをしているときのE要素に適用
言語疑似クラス E:lang(fr) frという言語のE要素に適用
:first-child疑似クラス E:first-child ある要素内の最初のE要素に適用
:first-line疑似クラス E:first-line Eという要素の最初の一行のみに適用
:first-letter疑似クラス E:first-letter Eという要素の最初の一文字のみに適用
:before疑似クラス E:before Eという要素の前に生成される内容に適用
:after疑似クラス E: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要素に適用
:root疑似クラス E:root 文書のルートに適用
:last-child疑似クラス E:last-child ある要素内の最後のE要素に適用
:nth-child()疑似クラス ある要素内に隣接しているE要素から最初から数えて、n番目のE要素に適用
:nth-last-child()疑似クラス E:nth-last-child(n) ある要素内の隣接しているE要素を最初から数え、n番目のE要素に適用
:first-of-type疑似クラス E:first-of-type 兄弟関係にあたるE要素の最初のE要素に適用
:last-of-type疑似クラス E:last-of-type 兄弟関係にあたるE要素の最後のE要素に適用
:nth-of-type疑似クラス E:nth-of-type(n) 兄弟関係のE要素を最初から数え、n番目のE要素に適用
:nth-last-of-type()疑似クラス E:nth-last-of-type(n) 兄弟関係のE要素を最後から数えてn番目のE要素に適用
:only-child疑似クラス E:only-child ある要素内で子要素がE要素のみの場合に適用
:only-of-type疑似クラス E:only-of-type ある要素内で唯一のE要素に適用
:emptye疑似クラス E:empty Eという要素が空の場合に適用
ターゲット疑似クラス E:target アンカーリンクで飛んだ先のE要素に適用
UI要素状態疑似クラス E:enbled
E:disabled
有効または無効にされているUI要素のE要素に適用
UI要素状態疑似クラス E:checked チェックの有無の状態によるE要素に適用
否定疑似クラス E:not(s) Eという要素のうち、sでないものに適用

【CSSセレクタの記述方法4】