■概要
セレクタ1 セレクタ2 { 属性1： 値1; 属性2： 値2; }
上記のようにタグ名の間に空白を入れたセレクタは、親タグの下位にあるタグへスタイルを適用します。
div span {…} のようにタグ名だけじゃなく #main_content .box {…} のようにIDとCLASSにも使えます。
■使用方法
div span{ text-align:center; padding:10px; }
div.yellow_box span { background-color:yellow; }
div#c_box span { text-align:center; padding:10px; }
div span .blue_span {background-color:blue; }
div span #c_span { text-align:center; padding:10px; }
■例
<html>
<head>
<style>
div.yellow_box span { background-color:yellow; }
div#c_box span { text-align:center; padding:10px; color: green; }
div span.blue_span {background-color:#09C; }
div span#c_span { text-align:center; padding:10px; color: orange; }
</style>
</head>
<body>
<div class=”yellow_box”>
<span>
yellow_box div クラス内の span です。
</span>
</div>
<div id=”c_box”>
<span>
c_box div ID内の span です。
</span>
</div>
<div>
<span class=”blue_span”>
div 内の blue_span クラス span です。
</span>
</div>
<div>
<span id=”c_span”>
div 内の c_span ID span です。
</span>
</div>
<div>
<span>
yellow_box div クラス内にいない span です。
</span>
</div>
<div>
<span>
c_box div ID内にいない span です。
</span>
</div>
</body>
</html>
■出力結果
yellow_box div クラス内の span です。c_box div ID内の span です。div 内の blue_span クラス span です。div 内の c_span ID span です。yellow_box div クラス内にいない span です。
c_box div ID内にいない span です。
