|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
●css1 ●css2 E 特定の要素 * すべての要素 E.class 特定のclass名がつけられた要素 E#id 特定のid名がつけられた要素 E[foo] foo属性を持つE要素 E[foo="bar"] foo属性の値にbarを持つE要素 E[foo~="bar"] foo属性の値候補(ホワイトスペース区切り)にbarを持つE要素 E[foo|="en"] foo属性の値候補(ハイフン区切り)がenで始まるE要素 E:first-child 子として最初のE要素 E:link 未訪問のリンク E:visited 訪問済のリンク E:active クリック中の要素 E:hover カーソルが乗っている要素 E:focus フォーカスされた要素 E:lang(fr) 特定の言語を指定された要素 E::first-line 要素の最初の行 E::first-letter 要素の最初の文字 E::before 要素の直前に内容を挿入する E::after 要素の直後に内容を挿入する E F E要素の子孫となるF要素 E > F E要素の子となるF要素 E + F E要素の直後に隣接しているF要素 E , F 複数のセレクタに同じスタイルを適用する ●css3 E[foo^="bar"] foo属性の値がbarで始まるE要素 E[foo$="bar"] foo属性の値がbarで終わるE要素 E[foo*="bar"] foo属性の値にbarを含むE要素 E:root 文書のルートとなる要素 E:nth-child(n) n番目の子となるE要素 E:nth-last-child(n) 後ろから数えてn番目の子となるE要素 E:nth-of-type(n) n番目のその種類の要素 E:nth-last-of-type(n) 後ろから数えてn番目のその種類の要素 E:last-child 子として最後のE要素 E:first-of-type 最初のその種類の要素 E:last-of-type 最後のその種類の要素 E:only-child 子として唯一となるE要素 E:only-of-type 子として唯一となるその種類の要素 E:empty 要素内容が空となるE要素 E:target リンクのターゲット先となるE要素 E:enabled 有効となっているユーザーインターフェース要素(テキストエリアなど) E:disabled 無効となっているユーザーインターフェース要素(テキストエリアなど) E:checked チェックされているユーザーインターフェース要素(ラジオボタン・チェックボックスなど) E:not(s) sで指定するセレクタに当てはまらないE要素 E ~ F E要素の後ろにある同じ階層のF要素 ユーザーインターフェースセレクタ 疑似クラス :indeterminate ラジオボタンやチェックボックスの切り替えがはっきりしない状態 :default ボタン・メニューなど、ユーザーインターフェース要素の初期状態 :valid 妥当な状態 :invalid 妥当ではない状態 :in-range 範囲内の状態 :out-of-range 範囲外の状態 :required 必須入力の状態 :optional 任意入力の状態 :read-only 閲覧専用の状態 :read-write 書き込み可能の状態(テキスト入力フィールドなど) 疑似要素 ::selection ユーザーに選択された状態のテキスト ::value 入力された値 ::choices 選択された選択肢 ::repeat-item 連続して要素が配置されている場合のそれぞれの要素 ::repeat-index 連続して要素が配置されている場合のその親要素 //------------------------------------------- E 要素名で指定した要素 * すべての要素 E.クラス名 クラス名を付けた要素 E#id名 id名を付けた要素 ○擬似クラス E:link 未訪問のリンク E:visited 訪問済のリンク E:hover カーソルが乗っている要素 E:active クリック中の要素 E:focus フォーカスされている要素 E:lang 特定の言語を指定した要素 E:first-child 要素内の最初の子要素 ○擬似要素 E::first-line 要素の最初の一行 E::first-letter 要素の最初の一文字 E::before 要素の直前 E::after 要素の直後 ○属性セレクタ E[foo] 特定の属性を持つ指定要素 E[foo= "bar"] 特定の属性値を持つ指定要素 E[foo~= "bar"] 属性値候補と一致した要素 E,F 複数のセレクタ E F 下の階層の子孫要素 E>F 直下の階層の子要素 E+F 直後に隣接している要素 |
上記はCSS2までのセレクタ一覧です。
CSS3では、
新しいセレクタが追加されているので、
参考にしてください。
CSS3より擬似要素に付けるコロン( : )が2つになって、
疑似クラスとの違いが分かりやすくなっています。
ただし、
コロン2つの記述方法は、
IE8以前ではサポートされていないので、
これらの旧いブラウザを考慮するなら、
疑似要素についてもコロン1つにしておいたほうが良いでしょう。
擬似クラス・擬似要素とは
疑似クラス(pseudo-classes)とは、
要素や属性などの文書構造だけでは特定できない “ある状況にある要素”を対象としてスタイルを適用するセレクタのことです。
例えば、
最初の子要素やユーザーが操作中の要素などを対象にスタイルを適用することが可能になります。
ユーザー操作による状況変化に対してスタイルを適用できるため、
ウェブページに動的な効果を与えることが出来ます。
一方、
擬似要素(pseudo-element)とは、
要素や属性などの文書構造だけでは特定できない “要素の一部”を対象としてスタイルを適用するセレクタのことです。
例えば、
要素の一行目や一文字目にスタイルを指定したり、
要素の前後にテキストや画像などを挿入することが出来ます。
擬似クラスと擬似要素の違いが分かりにくいですが、
疑似クラスは要素全体が対象になるのに対して、
疑似要素は要素の一部分だけが対象になる点が異なります。
