特定の子セレクタにのみスタイルシート(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>

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

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

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

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

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

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