隣接セレクタ

TOPページに戻る > CSS

スポンサード リンク

隣接セレクタ

特定の要素の次の要素にスタイルを設定できます
要素名+スタイルを適用する要素名(二つの要素が隣接している箇所にスタイルが適用されます。)
スタイルを適用するのは後ろの要素です
※ie6は隣接セレクタを使えません(ie7から使えます)

使い方(書式)
要素名+要素名 { プロパティ : 値; }
対応ブラウザ ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera

最初の1つ目の要素は条件の指定のみ、スタイルが適用されるのは+のあとの要素
em+b { プロパティ : 値; }

実際の指定方法

cssファイル em要素の次にくるb要素にスタイルを適用

em+b { color : red; }

html部分(空白を空けたり改行しても大丈夫です)

<em>em要素</em>


<b>b要素</b>

実際の表示

em要素     b要素

場所を指定する要素をclassセレクタやidセレクタで絞り込む


適用箇所を限定したい場合は最初の要素にclassセレクタやidセレクタをつけます(今回はclassセレクタで)

cssファイル (em要素のhogeとゆうクラス名の次にくるb要素のみにスタイルを適用)

em.hoge+b { color : red; }

html部分

<em class="hoge">em要素</em>
<b>b要素</b>

実際の表示

em要素 b要素

優先順位

※隣接セレクタは要素が2つの場合、2ポイントです。同じポイントの場合の優先順位は下に書いたcssが優先されます
em.hoge+b { color : red; }
/* この場合は、要素1つとclassセレクタ+要素1つなので1+10+1=12ポイント */

em+b { color : blue; }
/* この場合は、要素が2つなので1+1=2ポイント */

実際の表示

em要素(12ポイントが優先される) b要素

※ポイント一覧表

idセレクタ 100ポイント
class、擬似クラス 10ポイント
要素のみ(要素2個だと2ポイント) 1ポイント
全称セレクタ 0ポイント




(C)2012 ホームページ作成無料