CSSセレクタについて

CSSセレクタとは

.sample { font-size : 20px; }

ここでいう.sampleのところで、
CSSを適用する対象を指定することが出来ます。
対象の範囲が広いと、思いがけない所も対象となってしまうことがあるので
セレクタを指定するときは出来るだけ限定的に指定するのが大切です。

基本的な使い方

・全てのdevタグに適応します

dev { color: #0000ff; }

全称セレクタ

全ての要素に適応します。

* { color: #0000ff; }

classセレクタ

適応するclassを記載するときは、.を頭に着けることで指定できます。

.sample { color: #0000ff; }

idセレクタ

適応するidを記載するときは、#を頭に着けることで指定できます。

・選択したidの要素にCSSを適応する。

#sample { color: #0000ff; }

子孫セレクタ

指定した要素内の要素を指定する際に使用します。
使い方は半角スペースでセレクタを区切ります。

.sample p { font-size : 20px; }

直下セレクタ

特定の要素の直下にある要素のみを対象にする際に使用します。
使い方はセレクタ同士を>で繋ぎ適応します。

div.sample > p { font-size : 20px; }

間接セレクタ

特定の要素以降の兄弟要素に適応する際に使用します。
使い方はセレクタ同士を~で繋ぎ適応します。

dev ~ span { font-size : 20px; }

隣接セレクタ

特定の要素の後続(同一階層)に出現する隣の要素を対象にする際に使用します。
使い方は要素同時を+で繋ぎ適応します。

dev + span { font-size : 20px; }

属性セレクタ

任意の属性を持つセレクタを対象に適応する場合に使用します。
使い方は要素の後に[]で属性を指定します。

div[#sample] { color: #0000ff; }

更に値を指定することも出来ます。

div[#sample="test" ] { color: #0000ff; }