【CSS】セレクタの指定

「a, b」で指定

h1, h2 {
  color: red;
}

これは、同じスタイルを複数のセレクタに対して適用します。 h1とh2の文字色が赤色になります。

「a b」で指定

div p {
  color: red;
}

これは、divの下にあるpタグ全てにスタイルを適用します。

「a > b」で指定

div p {
  color: red;
}

スペースと似ているのですが、こちらは divの直下にあるpタグが対象になります。

例えば

<div>
  <p>p1</p>
  <span><p>p2</p></span>
</div>

この場合、

• 「div p」でスタイル指定 => p1とp2が赤色になります。
• 「div > p」でスタイル指定 => p1のみが赤色になります。

「a + b」で指定

p + p {
  color: red;
}

これは、pの次にくるp要素を赤色にします。 例えば、

<div>
  <p>p1</p>
  <p>p2</p>
  <div>div1</div>
</div>

この場合は、p2のみが赤色になります。

「a.」で指定

p.result {
  color: red;
}

クラス名がresultのp要素にスタイルが適用されます。

<div>
  <p class="result">p1</p>
  <p>p2</p>
  <div class="result">div1</div>
</div>

この場合は、p1のみ赤色になります。