セレクタ

セレクタ

簡単な用語の解説

下の記述を見てください。

h1 { color: red }

この指定はh1要素の'color'を"red"にします。

ページ内にあるすべてのh1要素の文字が赤くなるわけですね。

このとき上の記述のh1という部分が、セレクタです。

セレクタの解説

セレクタというのは、言ってみれば「どの要素にプロパティを適用するかをパターンを使って限定し、明示するもの」です。

CSSではあるルールに則ったパターンマッチにより、HTML構造内の要素に適用されるスタイルの規則を決定しています。

条件が全てあてはまる要素にだけ、指定したスタイルが適用されるわけです。

このパターンは単純に要素の名前だけのものから複雑な前後関係を照合できるものまで多岐にわたり、

そしてこの特定の要素を"選び出す"パターンのことをセレクタと呼びます。

次のHTMLの構造を見てください。

<html>
 <head>
  <title>セレクタの説明</title>
 </head>
 <body>
  <h1>セレクタの説明</h1>
  <p>セレクタというのは、どの要素にプロパティを適用するかを
     <em>パターンを使って限定し、明示するもの</em>です。</p>
  <dl>
   <dt>セレクタ</dt>
   <dd>どの要素にプロパティを適用するかを
      <em>パターンを使って限定し、明示するもの</em></dd>
  </dl>
 </body>
</html>

このHTMLにあって、特にdd要素内のem要素にだけ特定のスタイルを指定したい、という場合があります。これはセレクタの中でも子供セレクタ子孫セレクタというパターンを使用することで実現できます。

例えば以下のような指定は子孫セレクタといい、dd要素の子孫であるem要素にマッチします。

dd em { color: blue }

この指定によって、dd要素内のem要素は青字になり、一方でp要素内のem要素はパターンマッチせず、そのスタイルは変化しません。

このようにCSSでは、セレクタを使い分けることで驚くほど細部までスタイルを指定することが可能です。

子供セレクタIEで未対応のため、子孫セレクタを用いての例でした。セレクタの種類については次の項で説明します*1

セレクタの種類

セレクタの種類には以下の8種類があります。

セレクタのグループ化

複数のセレクタで、プロパティが一致する際、セレクタをコンマ(,)で区切ることによってセレクタをグループ化し、一まとめにすることが出来ます。

h1 { color: red }
h2 { color: red }
h3 { color: red }

上のようなセレクタがあった場合、以下のようにグループ化できます。

h1, h2, h3 { color: red }

*1:また、はてなダイアリーでは子孫セレクタの記述子>がサニタイズされ&gt;となるために外部CSSであるtDiaryおよびはてなダイアリーテーマ以外で子孫セレクタは利用できません。

* はてなダイアリーキーワード:セレクタ

Error : RSSが取得できませんでした。 Error : RSSが取得できませんでした。