HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


HTMLタグボードトップ >> 今すぐ使える!便利ツール >> スタイルシート(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」の要素すべて

次のページへ >>