親セレクタ 子や孫セレクタ { プロパティ:値 ; …}
CSS/HTMLの書き方
CSS
親セレクタ 子や孫セレクタ { プロパティ:値 ; プロパティ:値 ; …}
解説
HTMLの要素には、親要素、子要素、孫要素…の関係があります。
つまり、要素をさらに要素で囲った場合や、複数の要素からなるTABLEなどの要素には、必ずこのような関係があります。
親セレクタと子孫セレクタの間に「半角スペース」を挿入します。
スタイルシートでは、親要素に含まれる子や孫要素にのみCSSを適用することができます。
例えば、P(段落)要素内にあるA(リンク)要素にだけスタイルシートを適用するなどの使い方が出来ます。
具体的に以下の例を参照してください。
CSS/HTMLサンプル
CSS
p strong { color:blue ; }
HTML
<p><strong>段落内の強調</strong>
<i>段落内の斜体</i></p>
P(段落)要素に含まれるSTRONG要素のみ文字色を青にする サンプル
クラスやID指定にも使える
このCSSの定義は親子関係が成立しているセレクタに有効なので、HTMLの要素だけでなく、クラスやIDでも同じ事が出来ます。
記述方法については、以下の表を参照してください。
セレクタの書き方 | 対象の親要素(意味) | 対象の子や孫要素(意味) |
---|---|---|
p.test1strong | クラス名が「test1」のp要素 | strong要素 |
.test2 a | クラス名が「test2」の要素すべて | a要素 |
div#test3 .test_in | ID名が「test3」のdiv要素 | クラス名が「test4」の要素すべて |