特定の親セレクタに付属する子や孫セレクタにのみスタイルシート(CSS)を適用する

親セレクタ 子や孫セレクタ { プロパティ:値 ; …}

CSS/HTMLの書き方

CSS
親セレクタ 子や孫セレクタ { プロパティ:値 ; プロパティ:値 ; …}

CSSの詳細情報
対応ブラウザ Windows MAC
IE 5.0以上/FF1.0/NS7.1/OP8.0 SF/IE5.0
CSSレベル CSSレベル1

解説

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」の要素すべて

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSS、Webデザインを体系的に学ぶなら

CSSを駆使したモダンなWebデザインを学ぶなら

最新情報をチェックしよう!