CSS入門 | CSSセレクター | 結合セレクター

CSSセレクターは、1つ以上のセレクターを含むことができる。結合セレクターは、関連するセレクター間の関係を設定する。

子孫セレクター

子孫セレクターは、該当要素の子孫要素の中から、特定タイプの要素をすべて選択する。

次の例は、すべての<div>タグの子孫要素の中から<p>タグをすべて選択する例である。

div p {スタイル;}

上の例のように、子孫セレクターではdivとpの間に必ず1つの空白を指定する必要がある。

<style>
    div p { background-color: #FFEFD5; }
</style>

子セレクターは、該当要素の直下に存在する子要素の中から、特定タイプの要素をすべて選択する。

次の例は、すべての<div>タグの直下に存在する子要素の中から<p>タグをすべて選択する例である。

div > p {スタイル;}

<style>
    div > p { background-color: #FFEFD5; }
</style>