CSS > セレクター解説

CSSの「>」セレクターについて

CSSの「>」セレクターは、親要素と子要素の間の関係を指定するためのセレクターです。直接の子要素のみを選択する特徴があります。

具体的な使い方

.parent > .child {
  /* ここにスタイルを指定 */
}

このコードでは、クラス名「parent」を持つ要素の直接の子要素であるクラス名「child」を持つ要素にスタイルを適用します。

例

<div class="parent">
  <p>直接の子要素</p>
  <div class="child">
    <p>孫要素</p>
  </div>
</div>

上記のHTMLコードに対して、先ほどのCSSを適用すると、クラス名「child」を持つ要素（直接の子要素）にのみスタイルが適用されます。孫要素には適用されません。

CSSの「>」セレクター解説：具体的なコード例

.parent > .child {
  /* ここにスタイルを指定 */
}

• .child: 子要素のクラス名
• .parent: 親要素のクラス名

具体的な例

<div class="parent">
  <p>直接の子要素</p>
  <div class="child">
    <p>孫要素</p>
  </div>
</div>

.parent > .child {
  color: blue;
  font-weight: bold;
}

この例では、クラス名「parent」を持つ要素の直接の子要素であるクラス名「child」を持つ要素に青色の太字を適用します。孫要素にはスタイルが適用されません。

複数のレベルでの使用

<div class="grandparent">
  <div class="parent">
    <p>直接の子要素</p>
    <div class="child">
      <p>孫要素</p>
    </div>
  </div>
</div>

.grandparent > .parent > .child {
  color: red;
}

この例では、クラス名「grandparent」を持つ要素の直接の子要素であるクラス名「parent」を持つ要素の直接の子要素であるクラス名「child」を持つ要素に赤色を適用します。

他のセレクターとの組み合わせ

.container > p.important {
  font-size: 20px;
}

子要素セレクター

• 説明
  直接の子要素のみを選択します。
• 形式
  parent > child

後代セレクター

• 説明
  子要素、孫要素、ひ孫要素など、すべての後代要素を選択します。
• 形式
  parent descendant

• 説明
  特定の属性を持つ要素を選択します。
• 形式
  element[attribute]

クラスセレクター

• 説明
  クラス名に基づいて要素を選択します。
• 形式
  .class-name

• 形式
  #id-name

• 形式
  element

擬似クラス

• 形式
  element:pseudo-class

擬似要素

• 説明
  要素の生成された部分を選択します。

<div class="parent">
  <p>直接の子要素</p>
  <div class="child">
    <p>孫要素</p>
  </div>
</div>

/* 「>」セレクター */
.parent > .child {
  color: blue;
}

/* 子要素セレクター */
.parent .child {
  color: green;
}

/* 後代セレクター */
.parent .child p {
  color: red;
}

/* 属性セレクター */
[data-target="child"] {
  color: yellow;
}

/* クラスセレクター */
.child {
  color: purple;
}

/* IDセレクター */
#child-id {
  color: orange;
}

/* タグセレクター */
p {
  color: brown;
}

/* 擬似クラス */
a:hover {
  color: gray;
}

/* 擬似要素 */
p::first-letter {
  font-weight: bold;
}