CSSの>セレクタで親要素の直下にある子要素を選択する方法をわかりやすく解説

> セレクタは「子要素セレクタ」とも呼ばれ、指定した親要素の直下にある子要素に対してスタイルを適用します。このセレクタは、指定された親要素に直接含まれる子要素だけをターゲットにし、孫要素には影響を与えません。

CSS: > セレクタが効かない時の原因と対策

要素が直接の子要素ではない

> セレクタは、指定された要素の直下にある子要素にのみ適用されます。もしターゲットがさらに深い階層にある孫要素である場合、このセレクタは機能しません。

対策: HTML構造を確認し、ターゲットとする要素が親要素の直接の子要素であるか確認してください。

セレクタの優先順位（特異性）が低い

他のより具体的なCSSセレクタが > セレクタよりも優先される場合、スタイルが適用されないことがあります。

対策: より具体的なセレクタを使用するか、!important を使用してスタイルを強制的に適用します。

共通するCSSコード

.css-sample-container {
  width: 80%;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  text-align: center;
  font-family: Arial, sans-serif;
}

表示例

CSS: > セレクタ

以下の例では、親要素である .css-sample-container の直下にある子要素 .css-sample-child に対して背景色が変更されます。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-child">直接の子要素</div>
  <div class="css-sample-child">直接の子要素</div>
  <div>
    <div class="css-sample-child">孫要素</div>
  </div>
</div>

CSSコード

.css-sample-container > .css-sample-child {
  background-color: #e0f7fa;
  padding: 5px;
}

結果

まとめ

• > セレクタは、指定された親要素の直下にある子要素に対してスタイルを適用します。
• 孫要素やさらに深い階層にある要素には影響を与えません。
• セレクタの特異性やキャッシュの問題に注意する必要があります。