コーススケジュール

CSS 結合セレクター

コンビネータは、セレクタ間の関係を解釈するためのメカニズムです。

CSS セレクターには、複数の単純なセレクターを含めることができます。単純なセレクターの間にコンビネーターを含めることができます。

CSS には 4 つの異なるコンビネータがあります。

子孫セレクターは、指定された要素の子孫であるすべての要素と一致します。

次の例では、<div> 要素内のすべての <p> 要素を選択します。

div p {
  background-color: yellow;
}

概要: 子孫セレクターを使用すると、ul 内のすべての li のフォントの色を赤に設定する必要がある場合、1 行のコードを記述するだけで済み、コードは小さく、美しく、読みやすいです。

子セレクターは、指定された要素の子であるすべての要素と一致します。

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

div > p {
  background-color: yellow;
}

隣接兄弟セレクターは、指定された要素の隣接兄弟であるすべての要素と一致します。

兄弟（兄弟）要素は同じ親要素を持つ必要があり、「隣接」は「直後」を意味します。

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

div + p {
  background-color: yellow;
}

汎用兄弟セレクターは、指定された要素の兄弟であるすべての要素と一致します。

次の例では、

要素の兄弟であるすべての

要素を選択します。

div ~ p {
  background-color: yellow;
}