CSS 派生選択子

派生選択子

要素がその位置の文脈関係に基づいてスタイルを定義することで、マークアップをより簡潔にすることができます。

CSS1では、この方法でルールを適用する選択子は、文脈選択子（contextual selectors）と呼ばれます。これは、ルールを適用または避けるために文脈関係に依存しているためです。CSS2では、これらは派生選択子と呼ばれますが、呼び名に関わらず、機能は同じです。

派生選択子は、ドキュメントの文脈関係に基づいて特定のタグのスタイルを決定することができます。適切に派生選択子を使用することで、HTMLコードをより整理できます。

例えば、リスト内のstrong要素が通常の粗い字ではなく、イタリック字に変更されるようにしたい場合は、派生選択子を定義することができます：

li strong {
    font-style: italic;
    font-weight: normal;
  }

強調された<strong>青いコードの文脈関係に注意してください：

<p><strong>私は粗い字ではなく、イタリック字です。なぜなら、私はリストに含まれていないため、このルールは私には適用されません。</strong></p>
<ol>
<li><strong>私はイタリック字です。これはstrong要素がli要素内に位置しているためです。</strong></li>
<li>私は通常のフォントです。</li>
</ol>

上記の例では、li要素内のstrong要素のスタイルがイタリック字で、strong要素に特別なclassやidを定義する必要はありません。コードがより簡潔になります。

以下の CSS 规則を見てみましょう：

strong {
     color: red;
     }
h2 {
     color: red;
     }
h2 strong {
     color: blue;
     }

以下は影響を受ける HTML です：

<p>この段落で強調表示された単語は<strong>赤</strong>です。</p>
<h2>このサブヘッダーも赤です。</h2>
<h2>このサブヘッダーで強調表示された単語は<strong>blue</strong>.</h2>

関連コンテンツ

派生選択子に関するより深い知識を学びたい場合は、以下の CodeW3C.com の高度なチュートリアルを読んでください：