要素内の直下の子要素を選択するセレクタはこちらの記事を参照してください。
要素の中にある下位の要素に対してスタイルを設定するコードを紹介します。
要素の中にある特定の要素に対してスタイルを設定する場合には、「子孫セレクター(Descendant selector)」を利用します。
下位の要素をすべて対象とする「子孫セレクター」は" "(空白)で区切ります。(descendant combinator)
以下のコードを記述します。スタイルシートの記述以外は、先の例と同じです。
.blue p {
color:#0000FF;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="DescendantSelector.css" />
</head>
<body>
<div>何も設定していないdiv</div>
<p>何も設定していないpタグ</p>
<div class="blue">
blueクラス内の記述
<p>blueクラス内のpタグ</p>
<blockquote>
<p>blueクラス内のBlockQuote内のpタグ</p>
</blockquote>
</div>
</body>
</html>
blueクラス下位にあるpタグに関して、文字色を青にする設定をしています。
上記のHTMLファイルを表示すると下図の結果となります。blueクラス内の下位のpタグの文字色が青で描画されます。blueクラス内のblockquoteタグ内のpタグもblueクラスの下位要素になるため、文字色の青が反映されます。
複数続けて記載することで複数階層でのスタイル定義ができます。
.Container .FrameA span {
text-decoration:underline;
color:#A00000;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="DescendantSelector2.css" />
</head>
<body>
<div class="Container">
<div class="FrameA">
<p>Containerクラス内のFrameAクラス内のpタグ<br />
<span>Containerクラス内のFrameAクラス内のpタグ内のspan</span><br />
</p>
<span>Containerクラス内のFrameAクラス内のspan</span><br />
</div>
<span>Containerクラス内のspan</span><br />
</div>
</body>
</html>
".Container .FrameA span"と記載することでContainerクラスの下位にあるFrameAクラスの下位にあるspanタグのスタイルを指定できます。上記の例では下線を付加し、文字色を暗い赤に設定しています。
上記のHTMLファイルをWebブラウザで表示すると、下図の表示結果となります。指定した部分の文字列に下線が付き赤文字になっています。
