CSSコンビネータのやさしい解説

CSS のコンビネーターは、複数の CSS セレクターを結合するために使用されます.コンビネータは、要素の大きなグループを選択したり、特異性を高めたりするために、創造的な方法で使用できます. 4種類のコンビネータは、

子孫コンビネータ (スペース)

子コンビネータ (>)

一般的な兄弟コンビネータ (~)

隣接兄弟コンビネータ (+)

代わりにビデオをご覧ください:

子孫コンビネータ

子孫コンビネータは単なるスペース文字です.名前が示すように、子孫を選択します.

div p {
    color: red;
}

上記の CSS は、div 要素の子孫であるすべての段落を選択します.複数の子孫コンビネータを組み合わせて、特異性を高めることができます. CSS ルールは、具体性に応じてオーバーライドされます.

子コンビネータ

子コンビネータは、親コンビネータの直接の子を選択します.

div > p {
    color: red;
}

上記の 2 つのコードの違いは、最初のコードが div の下にあるすべての段落要素を選択することです. 2 つ目は直接の子のみを選択します.そのため、他のタグ内にネストされた段落がある場合、スタイルはそれらに適用されません.

一般的な兄弟コンビネータ

一般的な兄弟コンビネータは、指定された要素の後にあるすべての要素を選択します.

div ~ p {
    color: red;
}

上記の CSS は、div の後に続くすべての段落を選択します.間に他のhtmlタグがあっても構いません. div の後に続くすべての段落が選択されます.

隣接兄弟コンビネータ

隣接兄弟コンビネータは、指定された要素の後に来る要素を選択します.

div + p {
    color: red;
}

上記の CSS は、div の直後にあるすべての段落を選択します.これは、間隔を空ける目的で役立ちます.たとえば、セクションの直後にある画像の上にスペースを追加したい場合.