さすが隣接兄弟選択子(Adjacent sibling combinator)!おれたちにできない事を平然とやってのけるッ そこにシビれる!あこがれるゥ![ E + F ]

http://www.w3.org/TR/css3-selectors/#selectors
http://www.y-adagio.com/public/standards/tr_css2/selector.html#adjacent-selectors

自分、よそ様のサイトのhtmlやcssをみて「へ~こうやってるのか、こうなってるのか」なんていう解析をほとんどしないので、こんな事しなくともスマートに解決する方法がどこかにあって、当たり前のように皆様は実装してるのかもしれませんが、あいにくとそのような素敵な方法を知らず、かといってむやみにcssの指定を増やすのも面倒臭いので、気が向いた時にしか調整してこなかった事が、隣接兄弟選択子を使うと簡単に解決できました。

例としてよくあるマークアップ

基本のCSS

pは段落なのでpとpの間にはmarginが欲しいです。

それが仇になるのが下の場合、pをulのタイトル的に扱いたい時、
ulにmargin-bottomが付いてなければpとulの見た目の関係がまるっきり逆になりかねない。

参考スクリーンショット
隣接兄弟選択子なし

これに隣接兄弟選択子をつかうと、(ulやpに余計なclass指定をせずに)pとulが隣接する場合のmarginを指定出来ます!

参考スクリーンショット
隣接兄弟選択子あり


コメントを残す

メールアドレスが公開されることはありません。

You can add images to your comment by clicking here.