CSS3 Pre-Reference



兄弟セレクタ

同一階層の要素を指定

試す

コード

div ~ p { }

サンプル

○の要素に赤い枠線が表示されていれば正しいです。

×p: 前に同じ階層の要素がない

×div: 直前の同じ階層の要素がない

×p: 同じ階層ではない

×div: 直前の要素は正しいがこの要素がpではない

×p: 同じ階層ではない

○p

○p

×div

コメントする


対応ブラウザ

Firefox
Chrome/Safari
Opera
InternetExplorer
7~

パラメータ

レベル 3
参考文献 Selectors Level 3#8.3.2. General sibling combinator

解説

兄弟関係、つまり同一階層にある要素を指定します。

記述方法としては、「div ~ span」のように、兄要素(この場合は「div」)と弟要素(この場合は「span」)をチルダ記号「~」でつないで指定します。チルダ記号の前後に空白類(半角スペースなど)を入れることもできます。

トラックバック

投稿されたコメント