ウェブサイトコーディングでよく使うHTMLタグとCSSプロパティに続いて、今回はCSSで登場するセレクタ名をまとめていきます。セレクタを活用することで、効率良く幅広いデザインをしていくことが可能になります。同じくウェブサイトコーディングでよく登場するセレクタにスポットを当てて紹介していきたいと思います。またCSSセレクタについてはCSS3に対応した内容で記載しています。    

1.　全称・タイプ・クラスセレクタ

＊	【ユニバーサルセレクタ】すべての要素に適用されます。
E	【要素セレクタ】E要素すべてに適用されます。
E.クラス名	【クラスセレクタ】指定したクラス名をもつ要素に適用されます。
E＃id名	【idセレクタ】指定したid名をもつ要素に適用されます。

   

2.　子孫・隣接・複数セレクタ

E　F	【子孫セレクタ】E要素の子要素・孫要素であるF要素すべてに適用される。
E＞F	【子セレクタ】E要素の子要素であるF要素すべてに適用される。
E＋F	【隣接セレクタ】E要素の直後にあるF要素一つに適用される。
E〜F	【間接セレクタ】E要素の後に登場するF要素すべてに適用される。
E，F	【複数セレクタ】E要素とF要素すべてに適用される

   

3.　属性セレクタ

E［foo］	【属性セレクタ】E要素のfoo属性のものに適用される。
E［foo＝”bar”］	【属性値セレクタ】E要素のfoo属性かつ値がbarのものに適用される。

   

4.　擬似要素セレクタ

E：：before	【：：before擬似要素セレクタ】E要素の直前に要素を生成し適用させる。
E：：after	【：：after擬似要素セレクタ】E要素の直後に要素を生成し適用させる。
E：：first-line	【：：first-line擬似要素セレクタ】E要素の最初の1行に適用させる。
E：：first-letter	【：：first-letter擬似要素セレクタ】E要素の最初の1文字に適用させる。

   

5.　擬似クラスセレクタ

E：link	【：link擬似クラスセレクタ】E要素のリンク先が未訪問の時に適用される。
E：visited	【：visited擬似クラスセレクタ】E要素のリンク先が訪問済みの時に適用される。
E：hover	【：hover擬似クラスセレクタ】E要素にマウスカーソルが重なった時に適用される。
E：active	【：active擬似クラスセレクタ】E要素のリンク先をクリックした時に適用される。
E：focus	【：focus擬似クラスセレクタ】E要素の入力欄などにフォーカスされた時に適用される。
E：first-child	【：first-child擬似クラスセレクタ】ある要素に含まれる最初のE要素のみ適用させる。
E：last-child	【：last-child擬似クラスセレクタ】ある要素に含まれる最後のE要素のみ適用させる。
E：nth-child（n）	【：nth-child（n）擬似クラスセレクタ】ある要素に含まれる（最初から）n番目のE要素のみ適用させる。
E：only-child	【：only-child擬似クラスセレクタ】ある要素に含まれるE要素のみ適用させる。
E：not（F）	【：not擬似クラスセレクタ】E要素の中でF要素のみ適用させる。

    今回はCSSのセレクタについてまとめてみました。セレクタはうまく使うことでCSSを簡略化につながり、後の編集がとても楽になります。ぜひ積極的に使っていきスマートなコーディングを心がけていきましょう。