Selector (セレクター (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"class"warning" であるすべての <div> 要素が警告ボックスのように見えるようにする)、 "#customized""customized" の ID を持つ要素の基本フォントを 16 ピクセルの高さの Lucida Grande またはいくつかのフォールバックフォントに設定)です。

この CSS を次のような 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>

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

  1. CSS 入門内の CSS セレクターについての詳細
  2. 基本的なセレクター
    1. 要素型セレクター elementname
    2. クラスセレクター .classname
    3. ID セレクター #idname
    4. 全称セレクター * ns|* *|*
    5. 属性セレクター [attr=value]
    6. 状態セレクター a:active, a:visited
  3. グループ化セレクター
    1. セレクターリスト A, B
  4. 結合子
    1. 隣接兄弟セレクター A + B
    2. 一般兄弟セレクター A ~ B
    3. 子セレクター A > B
    4. 子孫セレクター A B
  5. 擬似クラス・要素
    1. 擬似クラス :
    2. 擬似要素 ::
  6. 技術リファレンス
    1. Selectors Level 3