特定の親セレクタに付属する子や孫セレクタにのみスタイルシートを適用する
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でも同じ事が出来ます。記述方法については、以下の表を参照してください。
|
