CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで子要素を選択する方法｜子結合子と子孫結合子の違いを解説

CSSの子結合子（child combinator）は、親要素の直下にある子要素のみを選択するために使用します。記号「>」を用いて表現します。

子結合子の基本的な構文は以下の通りです。

セレクタ > セレクタ {
    プロパティ: /*値*/;
}

一方、子孫結合子（descendant combinator）は、親要素に含まれるすべての子孫要素（子・孫・ひ孫など、階層の深さに関係なく）を選択します。セレクタ同士を半角スペースで区切って記述します。

子孫結合子の基本的な構文は以下の通りです。

セレクタ セレクタ {
    プロパティ: /*値*/;
}

使用例1：子結合子の基本的な使い方

以下の例では、「article > *」というセレクタを使用し、article要素の直下にあるすべての子要素に対して中央揃えと枠線のスタイルを適用しています。

<!DOCTYPE html>
<html>
<head>
<style>
article > * {
    text-align: center;
    border: 10px groove tomato;
}
::first-line {
    box-shadow: inset 0 0 7px cornflowerblue;
}
</style>
</head>
<body>
<article>
<h2>Donec rutrum a erat vitae interdum.</h2>
<p>Duis consequat aliquet leo, quis aliquam ex vehicula in. Vivamus placerat tincidunt hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper ex eget nulla consectetur varius.</p>
<img src="https://images.unsplash.com/photo-1612840666989-a16302e84978?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=120&ixlib=rb-1.2.1&q=80&w=120" />
</article>
</body>
</html>

実行結果

上記のコードを実行すると、次のように表示されます。

CSSで子要素を選択する方法｜子結合子と子孫結合子の違いを解説

使用例2：子結合子と子孫結合子の違いを確認する

次の例では、「body > *」でbody要素の直下の子要素にマージンを設定し、「article p」でarticle要素内のすべてのp要素（div要素の中にネストされたものも含む）にスタイルを適用しています。両者の選択範囲の違いに注目してコードを見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
body > * {
    margin: 20px;
}
article p {
    font-size: 24px;
    box-shadow: -10px 1px 0 rgba(12,43,180, 0.6);
}
</style>
</head>
<body>
<article>
<p>Neque porro quisquam</p>
<p>est qui dolorem ipsum quia dolor sit amet,</p>
<div><p>consectetur, adipisci velit.....</p></div>
</article>
<div>
<p>consectetur, adipisci velit</p>
<article>
<p>consectetur, adipisci velit</p>
</article>
</div>
</body>
</html>

実行結果

上記のコードを実行すると、次のように表示されます。

CSSで子要素を選択する方法｜子結合子と子孫結合子の違いを解説

まとめ：2つの結合子の違い

  • 子結合子（A > B）：Aの直下にある子要素Bのみを選択します。孫要素以降は対象外です。
  • 子孫結合子（A B）：Aの中に含まれるすべての階層のB要素を選択します。ネストの深さは問いません。

意図しない要素までスタイルが適用されるのを防ぎたい場合は子結合子を、特定のコンテナ内の要素全体に一括でスタイルを適用したい場合は子孫結合子を使うと、より精度の高いCSS設計が可能になります。

  1. CSSでレスポンシブなフローティング要素を作成する方法【初心者向け解説】

    CSSでレスポンシブ対応のフローティング（回り込み）要素を作成するには、float プロパティと @media（メディアクエリ）を組み合わせます。これにより、画面幅に応じて要素の左右配置を動的に切り替えることができます。 サンプルコード 以下のコードは、画面サイズに応じてfloatの方向が入れ替わるレスポンシブなレイアウトの実装例です。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale

  2. CSSで兄弟要素を選択する方法｜隣接兄弟セレクタ（+）と一般兄弟セレクタ（~）の違いを解説

    CSSには、同じ親要素を持つ「兄弟要素」を選択するための結合子が2種類用意されています。1つは隣接兄弟結合子（+）、もう1つは一般兄弟結合子（~）です。それぞれの動作の違いを理解して、目的に応じて使い分けましょう。 隣接兄弟結合子（+）とは 隣接兄弟結合子（+）は、最初のセレクタで指定した要素の直後に隣接している要素だけをマッチさせたい場合に使用します。2つのセレクタは、必ず同じ親要素の子要素である必要があります。 CSSにおける隣接兄弟結合子の構文は以下の通りです。 Selector + Selector { attribute: /*値*/ } 一般兄弟結合子（~）とは 一方、2つ