1.3 で触れたように，CSS では一般に，宣言とおよびそれを適用させるべき要素を指定する。この“宣言を適用させるべき要素”はセレクタによって指定される。

　これまでは，要素名を直接指定するシンプルなセレクタであったが，“X 要素の下位要素である Y 要素に対して”というような“絞り込んだ”セレクタの指定方法も用意されている。これを下位要素セレクタという。

　下位要素セレクタは，2 つ以上の要素名を空白で区切って指定する。すなわち

要素名 要素名

のようになる。たとえば，P EM というセレクタは，“P 要素の下位要素である EM 要素”と一致する。このとき，一致するべき要素はあくまで EM 要素であることに注意していただきたい。

　下位要素セレクタの例をご覧いただこう。

H1 EM { color: green; }
P EM { color: navy; }

　これらはいずれも EM 要素に対してであるが，それが H1 の下位要素であるか，P の下位要素であるかによって異なるスタイルが適用される。

<H1><EM>拡散方程式</EM>とランダムウォーク</H1>
<P>　拡散方程式は，時間および位置を離散化し，<EM>1 単位時間後に位置を半々の確率で 1 つ動く</EM>という<DFN>ランダムウォーク</DFN>の連続極限として得ることができる。</P>

また，このセレクタは“下位要素”で絞り込むので，上の例のように必ずしも子要素でなくても適用される。さきほどのスタイルシートを用いて，

<P>　熱力学の第二法則は，さまざまないい表し方をされる。そのひとつに，<Q>熱を<EM>すべて</EM>仕事に変換することはできない</Q>というものがある。</P>

　この中の EM 要素は P の子要素ではないが，下位要素ではある。したがって，この EM 要素にも P EM のセレクタを持つルールセットが適用される。

　下位要素セレクタは，2 つの要素名を並べるだけでなく，それ以上でも構わない。たとえば，BLOCKQUOTE P EM は，“BLOCKQUOTE の下位要素である P の下位要素である EM”と一致する。

　下位要素セレクタと似たものに，子要素セレクタがある。これは，絞り込みが子要素のみに適用される。子要素ではない下位要素には適用されない。

　書式は，要素名を大なり不等号「>」で結んで指定する。

要素名 > 要素名

大なり不等号の前後の空白はなくてもよい。

　これも，たとえばセレクタ P > EM に対して，“P の子要素である EM”と一致する。

　次のスタイルシートを用いて，前項の 2 つの HTML を出力させる。

H1 > EM { color: green; }
P > EM { color: navy; }

を指定したならば，出力は，

　前者では，2 つの EM 要素はそれぞれ H1 および P に対して子要素の関係なので，それぞれのセレクタと一致している。後者の例では，EM 要素は P の（下位要素であるが）子要素ではないので，P > EM のセレクタとは一致しない。

　子要素セレクタも，下位要素セレクタと同様に深い絞り込みができる。たとえば，BLOCKQUOTE > P > EM では，“BLOCKQUOTE の子要素である P の子要素である EM”と一致する。

　また，下位要素セレクタとの組み合わせも可能で，DIV > OL EM では，“DIV の子要素である OL の下位要素である EM”と一致する。