CSSのコンテキストセレクター

コンテキストセレクターは、 スペース (' ') で表されるコマンドであり、 指定された親要素内にネストされたタグを選択できます。

構文

cssセレクター1 セレクター2 {
  
}

例

div タグ内にある全ての p タグを対象にし、 それらを赤色に塗りましょう:

html<div>
  <p>
    テキスト
  </p>
  <p>
    テキスト
  </p>
</div>

cssdiv p {
  color: red;
}

Результат:

例

要素 #elem 内にある全ての p タグを対象にし、 それらを赤色に塗りましょう:

html<div id="elem">
  <p>
    テキスト
  </p>
  <p>
    テキスト
  </p>
</div>

css#elem p {
  color: red;
}

Результат:

例

クラス .block を持つ要素内にある全ての p タグを対象にし、 それらを赤色に塗りましょう:

html<div class="block">
  <p>
    テキスト
  </p>
  <p>
    テキスト
  </p>
</div>

css.block p {
  color: red;
}

Результат:

例

div タグ内にあり、かつ p タグ内にある 全ての b タグを対象にし、それらを赤色に塗りましょう:

html<div>
  <p>
    テキスト <b>+</b>
  </p>
</div>

cssdiv p b {
  color: red;
}

Результат:

関連項目