セレクタの次のセレクタにだけ適用させる

セレクタ前+セレクタ後 { プロパティ:値 ; …}

CSS/HTMLの書き方

CSS
セレクタ前+セレクタ後 { プロパティ:値 ; プロパティ:値 ; …}

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

解説

あるセレクタの次のセレクタにのみスタイルシートを適用する方法です。

例えば、要素Aの次に続く要素Bにスタイルシートを適用したいけど、要素Aの次に続く要素Cにはスタイルシートを適用したくないといった場合に使用します。

このような関係にある前後のセレクタを『隣接セレクタ』といいます。

書き方は上記の通り。前後のセレクタの間に半角で「+(プラス)」を挿入します。

隣接セレクタの条件は、「どちらのセレクタも同じ親要素を持つこと」となります。

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

CSS/HTMLサンプル

h1+h2 { color:red ; }

h1(見出し)の後に続くh2は文字の色は赤 サンプル

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

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

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

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

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