CSS結合子
- 前のページ CSS アライメント
- 次のページ 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 伪類