この記事ではCSSの組み合わせセレクターの使い方を説明します

CSS 組み合わせセレクターには、単純なセレクターのさまざまな組み合わせが含まれます。

CSS3 には 4 つの組み合わせがあります。

• 子孫セレクター（スペース区切り）
• 子要素セレクター（大なり記号で区切る）
• 隣接する兄弟セレクタ（プラス記号で区切る）
• 通常の兄弟セレクター（ダッシュ区切り）

1. 子孫セレクター

子孫セレクターは、要素の子孫要素を選択するために使用されます。

次の例では、すべての <p> 要素を選択し、それらを <div> 要素に挿入します。

div p{
      背景色:黄色;
    }

2. 子要素セレクター

子孫セレクターと比較すると、子セレクターは別の要素の子である要素のみを選択できます。

次の例では、<div> 要素の直接の子であるすべての <p> 要素を選択します。

 div>p {
      背景色:黄色;
    }

3. 隣接兄弟セレクター

隣接兄弟セレクターは、別の要素の直後にあり、同じ親を持つ要素を選択します。

別の要素の直後にあり、両方の親が同じである要素を選択する必要があるときは、隣接兄弟セレクターを使用できます。

次の例では、最初の <div> 要素の後にあるすべての <p> 要素を選択します。

div+p{
      背景色:黄色;
    }

4. 後続の兄弟セレクター

次の兄弟セレクターは、指定された要素に続くすべての隣接する兄弟要素を選択します。

次の例では、すべての <div> 要素の後の隣接する兄弟要素 <p> をすべて選択します。

div~p {
      背景色:黄色;
    }

CSS 組み合わせセレクターの使い方を解説したこの記事はこれで終わりです。CSS 組み合わせセレクターに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。