CSS/CSS3の便利なセレクタを一覧にし、筆者のためにまとめた備忘録のような記事です。実際の適応例も記載しておりますのでCSS初心者の方もご活用いただけると思います。
目次
- CSSセレクタとは？
- セレクタ一覧
- E （要素型セレクタ）
- E#sample （IDセレクタ）
- E.sample （クラスセレクタ）
- * （全称セレクタ）
- E F （子孫セレクタ）
- E > F （子セレクタ）
- E + F （隣接セレクタ）
- E , F （複数セレクタ）
- E ~ F
- E[foo] （属性セレクタ）
- E[foo=”bar”] （属性セレクタ）
- E[foo~=”bar”] （属性セレクタ）
- E[foo^=”bar”] （属性セレクタ）
- E[foo$=”bar”] （属性セレクタ）
- E[foo*=”bar”] （属性セレクタ）
- E[foo|=”bar”] （属性セレクタ）
- :root （構造擬似クラス）
- E:nth-child(an+b) （構造擬似クラス）
- E:nth-last-child(an+b) （構造擬似クラス）
- E:nth-of-type(an+b) （構造擬似クラス）
- E:first-child （構造擬似クラス）
- E:last-child （構造擬似クラス）
- E:first-of-type （構造擬似クラス）
- E:last-of-type （構造擬似クラス）
- E:only-child （構造擬似クラス）
- E:only-of-type （構造擬似クラス）
- E:empty （構造擬似クラス）
- E:link ／ E:visited （リンク擬似クラス）
- E:hover （ユーザーアクション擬似クラス）
- E:active （ユーザーアクション擬似クラス）
- E:focus （ユーザーアクション擬似クラス）
- E:target （ターゲット擬似クラス）
- E:lang(C) （言語情報擬似クラス）
- E:enabled ／ E:disabled （UI 要素状態擬似クラス）
- E:checked （UI 要素状態擬似クラス）
- E::first-line （擬似要素）
- E::first-letter （擬似要素）
- E::before （擬似要素）
- E::after （擬似要素）
- E:not(s) （否定擬似クラス）
- 参考サイト
CSSセレクタとは？
CSSの基本文法はセレクタ・プロパティ・値の3つからなります。この内、セレクタというのは「CSSによるデザイン指定をどこの部分に対して適用するか」を決めるものになります。
セレクタ一覧
E （要素型セレクタ）
要素名で対象を指定してスタイルを適用する基本的なセレクタです。
スタイルを適用する対象
要素名で指定した要素
使用例
E#sample （IDセレクタ）
スタイルを適用する対象
“sample”というidをもつE要素
使用例
E.sample （クラスセレクタ）
スタイルを適用する対象
“sample”のclassをもつE要素
使用例
* （全称セレクタ）
アスタリスク（ * ）を記述してすべての要素を対象にスタイルを適用するセレクタです。
スタイルを適用する対象
すべての要素
使用例
E F （子孫セレクタ）
ある要素の子孫要素を表すセレクタ。セレクタの適用範囲を広くし過ぎると後々の保守で困ることも、、、。使う際は先を見越した設計の上で使うように注意。
スタイルを適用する対象
E 要素の子孫であるすべての F 要素。
使用例
E > F （子セレクタ）
スタイルを適用する対象
E 要素の子であるすべての F 要素。
使用例
E , F （複数セレクタ）
スタイルを適用する対象
カンマ（ , ）で区切られた E と F 要素。
使用例
E ~ F
セレクタを ~ （チルダ）で区切ると、 同じ階層にある要素同士であれば、E要素とF要素の間に他の要素があっても（E要素とF要素が隣接していなくても）、F要素にスタイルが適用されます。
スタイルを適用する対象
E 要素のあとに現れる F 要素。
使用例
E[foo] （属性セレクタ）
スタイルを適用する対象
“foo” 属性を持つ E 要素。
条件は「指定の属性を持っている」ことであり、値は何であれ対象となる。
使用例
E[foo=”bar”] （属性セレクタ）
特定の属性に特定の値を持つ指定要素を対象にスタイルを適用します。
スタイルを適用する対象
“foo” 属性が”bar”の値である E 要素。
使用例
E[foo~=”bar”] （属性セレクタ）
指定されている属性値候補と一致した場合にスタイルを適用します。
スタイルを適用する対象
“foo” 属性が空白区切りの値であり、その中の値の1つが”bar”であるE要素。
使用例
E[foo^=”bar”] （属性セレクタ）
スタイルを適用する対象
“foo” 属性の値が”bar”から始まるE要素。
使用例
E[foo$=”bar”] （属性セレクタ）
スタイルを適用する対象
“foo” 属性の値が”bar”で終了するE要素。
使用例
E[foo*=”bar”] （属性セレクタ）
スタイルを適用する対象
“foo” 属性の値に”bar”を含むE要素。
使用例
E[foo|=”bar”] （属性セレクタ）
スタイルを適用する対象
“foo” 属性の値がハイフン区切りの値をとり、その値が “bar” から始まる E 要素。
使用例
:root （構造擬似クラス）
スタイルを適用する対象
文書のルート要素
ルートとは、文書の“根っこ”、つまり、階層が一番上の親要素というほどの意味です。 HTML文書ならば、html要素がルート要素となります。
使用例
E:nth-child(an+b) （構造擬似クラス）
スタイルを適用する対象
n 番目の子であるE要素
最初の子要素のインデックスは1。
n はその要素が何番目であるかであり、正の整数もしくは0の値を取る。
a と b の値は整数 (正、負、もしくは0) でなければならない。
an+bではなく、‘odd’ や ‘even’ という引数を取ることもできる。‘odd’ は 2n+1（奇数を現す） と同じ意味を持ち、また ‘even’ は 2n（偶数を現す） と同じ意味を持つ。
使用例
E:nth-last-child(an+b) （構造擬似クラス）
スタイルを適用する対象
後ろから数えて n 番目の子である E 要素
使用例
E:nth-of-type(an+b) （構造擬似クラス）
スタイルを適用する対象
同じ型をもつ要素のうち n 番目にある E 要素
使用例
E:first-child （構造擬似クラス）
スタイルを適用する対象
最初の子である E 要素
使用例
E:last-child （構造擬似クラス）
スタイルを適用する対象
最後の子である E 要素
使用例
E:first-of-type （構造擬似クラス）
スタイルを適用する対象
同じ型をもつ要素のうち最初の E 要素
使用例
E:last-of-type （構造擬似クラス）
スタイルを適用する対象
同じ型をもつ要素のうち最後の E 要素
使用例
E:only-child （構造擬似クラス）
スタイルを適用する対象
唯一の子（兄弟になる要素が存在しない）である E 要素
使用例
E:only-of-type （構造擬似クラス）
スタイルを適用する対象
同じ型をもつ要素が他にない、兄弟になる要素が存在しない E 要素
使用例
E:empty （構造擬似クラス）
スタイルを適用する対象
テキストノードを含め子を持たない E 要素
使用例
E:link ／ E:visited （リンク擬似クラス）
スタイルを適用する対象
ハイパーリンクのアンカーである E 要素のうち、未訪問 (:link) であるもの、訪問済 (:visited) であるもの
使用例
E:hover （ユーザーアクション擬似クラス）
スタイルを適用する対象
カーソルが乗っているE要素
使用例
E:active （ユーザーアクション擬似クラス）
スタイルを適用する対象
クリック中のE要素
使用例
E:focus （ユーザーアクション擬似クラス）
スタイルを適用する対象
フォーカスされたE要素
使用例
E:target （ターゲット擬似クラス）
スタイルを適用する対象
リンクのターゲット先となるE要素
使用例
E:lang(C) （言語情報擬似クラス）
スタイルを適用する対象
言語情報 C を持つ E 要素 (言語情報の決定方法は文書言語が規定する)
言語情報 C は必ずしも有効な言語名である必要はないが、有効なCSS識別子でなくてはならない
使用例
E:enabled ／ E:disabled （UI 要素状態擬似クラス）
スタイルを適用する対象
有効 (:enabled)/無効 (:disabled) となっているユーザーインターフェース E 要素
使用例
E:checked （UI 要素状態擬似クラス）
スタイルを適用する対象
チェックされているユーザーインターフェース E 要素
使用例
E::first-line （擬似要素）
スタイルを適用する対象
E 要素の最初の行
使用例
E::first-letter （擬似要素）
スタイルを適用する対象
E 要素の最初の文字
使用例
E::before （擬似要素）
スタイルを適用する対象
E 要素の内容の前にある生成コンテンツ
なお、生成コンテンツはインライン要素になる。
使用例
E::after （擬似要素）
スタイルを適用する対象
E 要素の内容の後にある生成コンテンツ
なお、生成コンテンツはインライン要素になる。
使用例
E:not(s) （否定擬似クラス）
スタイルを適用する対象
sで指定するセレクタに当てはまらないE要素
使用例
参考サイト
最後に、参考にさせていただいたサイトを下記に表記いたします。
