CSSでのセレクタ(選択子)の一つである、直下セレクタ(子セレクタ)に関して解説します。
直下セレクタ(子セレクタ)とは、ある上位要素の直下にある要素を対象とするセレクタです。
下位セレクタ(子孫セレクタ)と違って、下位にある要素が直下で無い場合は対象外となります。
直下セレクタ(子セレクタ)の書式は、
上位セレクタ>下位要素セレクタ
と、「>」で区切ります。
このとき、上位セレクタ、下位要素セレクタとも任意のセレクタが使えます。
例えば、<h1>要素の直下にある<a>要素にスタイルを適用する場合は、
h1>a {…}
と記述します。
この場合、
<h1>…<a href="…">…</a>…</h1>
と言う関係になっている<a>要素は対象となりますが、
<h1>…<em>…<a href="…">…</a>…</em>…</h1>
と言う関係になっている<a>要素は<h1>要素の直下で無いため対象外となります。
直下セレクタ(子セレクタ)は、
では機能しません。
特に、インターネットエクスプローラのヴァージョンに依っては、下位セレクタ(子孫セレクタ)と誤認するものもあります。
WAP 2.0では、直下セレクタ(子セレクタ)は仕様に含まれておりません。
