ニワカが個人的に使いこなせていないCSSセレクタを覚えるための個人的メモです。
サイト作成をする際にCSSは何百行、何千行にもなることがあるので、出来るだけわかりやく汎用的に書ける様にするために覚えて利用していければと考えています。
子セレクタの概要
子セレクタは、ある要素（親要素）の直下にある要素（子要素）を対象とするセレクタ。別名、子供セレクタ、直下セレクタ。
親要素と子要素を「>」（記号の大なり）で区切って記述。
親要素 > 子要素 {
プロパティ: 値;
}
子セレクタの使用例
子セレクタの使用例をhtmlとcssと共に紹介。
html
<body>
<p>子要素</p>
<div>
<p>孫要素</p>
</div>
</body>
css
body > P {
color:red;
font-size:32px;
font-weight: bold;
}
実際の表示
親要素の直下にあるpタグ内の要素にはスタイルが反映され、親要素の直下に置いていないpタグ内の要素には影響しない。
個人的メモ
使いどころがすぐには思い浮かばないが、上記の例のように子孫セレクタだと下の要素にまでスタイルが適用されてしまうので、子セレクタを上手に使うと効率的で汎用性が上がったCSSが書けるのかも。
一応、IEはIE7以降対応のセレクタ。
参照ページ
記事にする際に参考にさせていただいたページ
