セレクタを理解する

2008年8月16日 20:41 | 個別ページ

CSSには様々なタイプのセレクタがあります。

ユニバーサルセレクタとは全称セレクタともいい、全ての要素を対象をするセレクタです。ユニバーサルセレクタは*（アスタリスク）で表します。


* {
   color:#000;
}

上記のように指定した場合、全ての要素の色は#000（黒）になります。

タイプセレクタとは、HTMLタグに適用されている要素名のことを指します。


strong {
   font-weight:bold;
}

タイプセレクタでは、その要素全てにスタイルを適用してしまいますが、より個別にスタイルを指定したいときに便利なのが、classセレクタ、idセレクタです。

classセレクタは、HTMLファイルにて｢class="XXXX"｣で指定したクラス属性の値を持つ要素にスタイルを適用します。


p.comment {
   color:#000;
}

classセレクタは上記のように、｢セレクタ.（ピリオド）クラス名｣で記述します。

idセレクタも同様に、HTMLファイルにて｢id="XXXX"｣で指定したid属性の名前（識別子を持つ要素にスタイルを適用します。


div#contents {
   width:800px;
}

classセレクタは上記のように、｢セレクタ#（シャープ）id名｣で記述します。

HTMLタグの入れ子（親子関係）になっている要素にスタイルを指定したい場合に子孫セレクタを使用します。例えば、pタグ中のstrongタグだけ色を赤にしたいときは以下のようにスタイルを指定します。


p strong {
   color:red;
}

子孫セレクタは上記のように、｢セレクタ（半角スペース)セレクタ｣で記述します。例ではセレクタは2つしかありませんが、いくつでも記述することは可能です。

親要素直接の子要素だけにスタイルを指定したい場合には子セレクタを使用します。孫要素にはスタイルは適用されません。


div#contents > p {
   padding-top:5px;
}


<div id="contents">
   <h2>子セレクタ</h2>
   <p>スタイルが適用されます。</p>
   <div>
      <p>スタイルが適用されません。</p>
   </div>
</div>

子セレクタは上記のように、｢セレクタ > セレクタ｣というふうにセレクタの間に｢>｣で区切りを入れます。ただし、子セレクタはIE6では対応していませんので使用には注意が必要です。

同一の親要素を持つ、隣接する2つの要素があった場合、前者を兄要素、後者を弟要素とし、弟要素にスタイルを指定したい場合には隣接セレクタを使用します。

下の例の場合、例えば弟要素であるpタグが連続して2つあったとしても、h2タグの直下に位置するpタグにしかスタイルは適用されないことに注意してください。


h2 + p {
   padding-top:5px;
}


<h2>隣接セレクタについて</h2>
<p>スタイルが適用されます。</p>
<p>スタイルが適用されません。</p>

隣接セレクタは上記のように、｢セレクタ + セレクタ｣というふうにセレクタの間に｢+｣で区切りを入れます。