指定内の最初の子セレクタにのみ働くスタイルシート(CSS)

親セレクタ 子セレクタ:first-child { プロパティ:値 ; …}

CSS/HTMLの書き方

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

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

解説

親セレクタの中に含まれる複数の子セレクタのうち、最初の子セレクタのみに働くスタイルシートの書き方です。

例えば、P段落タグの初めのSTRONG要素だけ文字色を変えるといった使い方ができます。

書き方は、親セレクタと子セレクタ名の間に「半角スペース」を入れ、子セレクタの後に「:first-child」と書きます。

なお、これは擬似クラスの一種です。

Windows版InternetExplorer5.0/5.5/6.0には対応していません。

CSS/HTMLサンプル

p strong:first-child { color:red ; }

段落内の初めのSTRONG要素の文字色を赤にする サンプル

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

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

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

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

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