CSS 组合选择符

CSS コンビネータ

	結合子は、2つのセレクター間の関係を説明します。

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

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

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

次の例では、<div> 要素内に挿入されたすべての <p> 要素を選択します:

div p { background-color:yellow; }

子孫セレクターと比較して、子要素セレクター（Child selectors）は、特定の要素の直接/第一レベルの子要素である要素のみを選択できます。

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

div>p { background-color:yellow; }

隣接兄弟セレクター（Adjacent sibling selector）は、別の要素の直後にある要素を選択でき、両者は同じ親要素を持つ必要があります。

別の要素の直後にある要素を選択し、かつ両者が同じ親要素を持つ場合は、隣接兄弟セレクター（Adjacent sibling selector）を使用できます。

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

div+p { background-color:yellow; }

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

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

div~p { background-color:yellow; }

其他扩展