要素内の下位にある要素を選択するセレクタはこちらの記事を参照してください。
要素の中にある直下の子要素に対してスタイルを設定するコードを紹介します。
要素の中にある特定の要素に対してスタイルを設定する場合には、「子セレクター (child selector)」を利用します。
子セレクターは>記号(child 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="ChildSelector.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タグは直接の子要素でないため文字色の青は反映されません。
複数続けて記載することで複数階層でのスタイル定義ができます。
.Container > .FrameA > p > 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="ChildSelector2.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 > p > span と記載することでContainerクラス内のFrameAクラス内のpタグ内のspanタグのスタイルを指定できます。上記の例では下線を付加し、文字色を暗い赤に設定しています。
スタイルシートで定義した場所だけ文字色が赤になっています。
要素の中にある特定の要素に対してスタイルを適用できました。
