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

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


HTMLタグボードトップ >> 今すぐ使える!便利ツール >> スタイルシート(CSS)辞典 >> スタイルシートの基本 >> 特定の子セレクタにのみスタイルシートを適用する

特定の子セレクタにのみスタイルシートを適用する

CSS/HTMLの書き方

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

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

解説

特定の親セレクタに付属する子や孫セレクタにのみスタイルシートを適用するに関連して、今回は子要素にのみ適用するCSSの書き方です。親セレクタと子セレクタの間に「>」を挿入します。

親要素に含まれる子要素にのみCSSを適用します。例えば、P(段落)要素内にあるSTRONG(強調)要素にだけスタイルシートを適用するなどの使い方が出来ます。具体的に以下の例を参照してください。

この書き方はWindows版InternetExplorer5.0/5.5/6.0には対応していません。

CSS/HTMLサンプル

CSS
p>strong { color:blue ; }

HTML
<p><strong>段落内の強調(子要素)</strong>
<i><strong>段落内かつ斜体内の強調(孫要素)</strong></i>
</p>

段落要素(親)の中にある強調要素(子)の文字色を青にする サンプル

次のページへ >>