要素の親子関係を示す子孫セレクタ

2015年6月13日

特定の親要素に内包する子要素を指定する

p{color:blue}、.test{font-size:10px}と要素名や
クラス名だけをセレクタとしてた方法をお伝えしてきました。

さらに、要素の親子関係を書くことで、詳細なセレクタを
指定することが可能です。

下記のサンプルコードの例だと、
１．divの背景は黒にしたい
２．本日のニュースの文字を赤くしたい場合
#container pと指定します。

３．ニュースの中身の文字を黄緑にしたい場合は
#container #news pと指定します。
４．ニュースの中にあるけど、執筆者の名前だけを
　黄色にしたい場合は
　#container #news addressとセレクタを指定します。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>HTMLのメモ</title>
    <style>
        #container{
            background-color: black;
        }
        #container p{
            color:red;
        }
        #container #news p{
            color:greenyellow;
        }
        #container #news address{
            color:yellow;
        }        
    </style>
</head>
<body>

<div id="container">
    <p>本日のニュース</p>
    <div id="news">
        <p>株式会社＊＊＊の新製品の発表・・・</p>
        <p>執筆者<address>ベスナ</address></p>        
    </div>
</div>
    
    
</body>
</html>

<!DOCTYPE html>

<head>

<title>HTMLのメモ</title>

<style>

#container{

background-color: black;

}

#container p{

color:red;

}

#container #news p{

color:greenyellow;

}

#container #news address{

color:yellow;

}

</style>

</head>

<body>

<p>本日のニュース</p>

<p>株式会社＊＊＊の新製品の発表・・・</p>

</div>

</body>

</html>

子孫セレクタの書き方

上記のサンプルコードのようにスタイルを指定したい箇所を含む
親要素を前に指定することで、詳細に定義することができます。
これを「子孫セレクタ」と言います。親子関係の順番通りに
半角スペースをあけて書けば、詳細な指定ができます。

「#container #news p」や「#container #news address」という
ようにです。ページ内にたくさんのpがある場合でも対応できます。