CSS結合子

CSS結合子

結合子は、選択子間の関係を説明する某种機構です。

CSS選択子は、複数の単純選択子を含むことができます。単純選択子の間には、結合子を含むことができます。

CSSには4種類の異なる結合子があります:

  • 後代選択子 (スペース)
  • 子選択子 (>)
  • 隣接兄弟選択子 (+)
  • 一般兄弟選択子 (~)

後代選択子

後代選択子は、指定された要素の後代に属するすべての要素に一致します。

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

div p {
  background-color: yellow;
}

自分で試してみてください

子選択子

子選択子は、指定された要素の子要素に属するすべての要素に一致します。

以下の例では、<div>要素の子要素に属するすべての<p>要素を選択します:

div > p {
  background-color: yellow;
}

自分で試してみてください

隣接兄弟選択子

隣接兄弟選択子は、指定された要素の隣接同級要素に一致するすべての要素に一致します。

兄弟(同級)要素は同じ親要素を持たなければなりません、「隣接」は「その後ろにある」という意味です。

以下の例では、<div>要素の直後に続くすべての<p>要素を選択します:

div + p {
  background-color: yellow;
}

自分で試してみてください

一般兄弟選択子

一般兄弟選択子は、指定された要素の同級要素に属するすべての要素に一致します。

以下の例では、<div>要素の同級要素に属するすべての<p>要素を選択します:

div ~ p {
  background-color: yellow;
}

自分で試してみてください

すべてのCSS結合選択子

選択子 例の説明
element element div p div要素内のすべての<p>要素を選択します。
element>element div > p 親要素が <div> 要素であるすべての <p> 要素を選択します。
element+element div + p すべての <div> 要素の次に来る <p> 要素を選択します。
element1~element2 p ~ ul すべての <ul> 要素が <p> 要素を持つを選択します。

関連リンク

课外書:CSS 後代セレクタ

课外書:CSS 子要素セレクタ

课外書:CSS 相邻兄弟セレクタ