Selector (セレクター) (CSS)

CSS セレクターは CSS のルールの一部で、文書中のどの要素がルールと一致するかを記述します。一致した要素にはルールで指定されたスタイルが適用されます。

例

この CSS を見てください。

css
p {
  color: green;
}

div.warning {
  width: 100%;
  border: 2px solid yellow;
  color: white;
  background-color: darkred;
  padding: 0.8em 0.8em 0.6em;
}

#customized {
  font:
    16px Lucida Grande,
    Arial,
    Helvetica,
    sans-serif;
}

ここでのセレクターは "p" （すべての <p> 要素内の文字列に緑色を適用）、 "div.warning" （<div> 要素でクラスが "warning" であるものがすべて警告ボックスのように見えるようにする）、 "#customized" （"customized" の ID を持つ要素の基本フォントを 16 ピクセルの高さの Lucida Grande またはいくつかの代替フォントに設定）です。

この CSS を次のような HTML に適用します。

html
<p>This is happy text.</p>

<div class="warning">
  Be careful! There are wizards present, and they are quick to anger!
</div>

<div id="customized">
  <p>This is happy text.</p>

  <div class="warning">
    Be careful! There are wizards present, and they are quick to anger!
  </div>
</div>

結果的に、ページの内容は次のように整形されます。

関連情報