CSSセレクタを使いこなせば、Webデザインの可能性は無限大！> と空白をマスターしよう

CSS セレクタにおける「>」と空白の違い

> (直の子要素)

• > は 直の子要素のみ を選択します。
• 例: div > p は、div 要素の 直接の子要素 である <p> 要素のみを選択します。
• 関係なく、div 要素の子孫である <p> 要素は選択されません。

空白 (子孫要素)

• 空白は すべての子孫要素 を選択します。
• div 要素の 直接の子要素 だけではなく、何重にでもネストされた子孫 の <p> 要素も選択されます。

例

以下の HTML 構造を例に考えてみましょう。

<div class="container">
  <p>段落1</p>
  <div class="nested">
    <p>段落2</p>
  </div>
  <p>段落3</p>
</div>

CSS

.container > p {
  color: red; /* 赤色に */
}

.container p {
  color: blue; /* 青色に */
}

この場合、以下の結果になります。

• .container > p は、div.container の 直接の子要素 である <p> 要素のみを 赤色 にします (段落1 と 段落3)。

• > は 直の子要素 のみを選択するのに対し、空白は すべての子孫要素 を選択します。
• どちらを使用するかは、スタイルを適用したい要素の範囲によって異なります。
• より具体的なセレクタを作成したい場合は、他のセレクタと組み合わせて使用することができます。

HTML

<div class="container">
  <p>段落1</p>
  <div class="nested">
    <p>段落2</p>
  </div>
  <p>段落3</p>
</div>

/* 直の子要素のみを赤色に */
.container > p {
  color: red;
}

/* すべての子孫要素を青色に */
.container p {
  color: blue;
}

この CSS コードを実行すると、以下のようになります。

• div.container の 直接の子要素 である <p> 要素 (段落1 と 段落3) は 赤色 に表示されます。

説明

• 上記の例では、2 つの CSS ルールを使用しています。
  • 最初のルールは div.container > p セレクタを使用しており、これは div.container 要素の 直接の子要素 である <p> 要素のみを選択します。この要素には color: red; プロパティが適用されるため、赤色で表示されます。

結果

この例では、> と空白の違いを明確に示しています。

• > は より具体的なセレクタを作成するために使用でき、スタイルを適用する要素を明確に制限できます。

補足

• 実際のプロジェクトでは、より複雑なセレクタを使用する必要がある場合があります。
• セレクタを適切に選択することは、CSS コードを効率的に記述するために重要です。
• 上記の例はあくまで基本的な例であり、より多くのセレクタを組み合わせることで、さらに複雑なスタイルを適用することができます。

CSS セレクタにおけるその他の方法

隣接セレクタ (+)

• > と同様に、子孫要素 は選択されません。

<p>段落1</p>
<h1>見出し1</h1>
<p>段落2</p>
<h1>見出し2</h1>

p + h1 {
  color: green; /* 緑色に */
}

• <p>段落1</p> の 直後に 来る <h1>見出し1</h1> は 緑色 に表示されます。
• <h1>見出し1</h1> と <h1>見出し2</h1> の 前 にある <p> 要素は 緑色 になりません。

• 直前の兄弟要素 も含まれます。

<p>段落1</p>
<h1>見出し1</h1>
<p>段落2</p>
<h1>見出し2</h1>
<p>段落3</p>
<h1>見出し3</h1>

p ~ h1 {
  color: green; /* 緑色に */
}

属性セレクタ

• 属性セレクタは、要素の属性値に基づいて要素を選択します。
• 例: [data-role="button"] は、data-role 属性が "button" に設定されたすべての要素を選択します。
• 属性の存在、値の一致、値のパターンなどを指定することができます。

<button data-role="button">ボタン1</button>
<button data-role="submit">送信</button>
<a href="#" data-role="button">リンクボタン</a>

[data-role="button"] {
  background-color: blue; /* 青色背景に */
  color: white; /* 白文字に */
}

• data-role 属性が "button" に設定されたすべての要素 (<button data-role="button">ボタン1</button> と <a href="#" data-role="button">リンクボタン</a>) は 青色背景 と 白文字 になります。
• data-role 属性が "submit" に設定された <button data-role="submit">送信</button> は 影響を受けません。

擬似クラス

• 例: :hover は、マウスカーソルが要素の上に置かれたときに適用されます。
• :focus は、要素がフォーカスされたときに適用されます。
• その他にも様々な擬似クラスがあります。

<button>ボタン</button>

button:hover {
  background-color: yellow; /* 黄色背景に */
}

button:focus {
  outline: 3px solid blue; /* 青色のアウトライン */
}

• マウスカーソルが <button>ボタン</button>の上に置かれたとき、ボタンは 黄色背景 になります。
• <button>ボタン</button> がフォーカスされたとき、ボタン