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

  • このエントリーをはてなブックマークに追加
  • LINEで送る

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

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

例としてよくあるマークアップ
[html]
<p>「おとなはウソつきだ」と思った少年少女のみなさん、どうもすみませんでした。</p>
<p>おとなはウソつきではないのです。まちがいをするだけなのです……。</p>
<hr />
<p>3択―ひとつだけ選びなさい</p>
<ul>
<li>答え(1)ハンサムポルナレフは突如反撃のアイデアがひらめく</li>
<li>答え(2)仲間がきて助けてくれる</li>
<li>答え(3)かわせない。現実は非情である。</li>
</ul>
<p>罰として、AとB両方の中を食べてもらいますからね!</p>
<ul>
<li>『Aは、英単語カードのコーンフレーク』!</li>
<li>『Bは、アスパラガスに英語辞書をまいたもの』!</li>
</ul>
[/html]

基本のCSS
[css]
*{
margin:0;
padding:0;
}
body {
padding:1em;
margin:1em;
}

p,ul,hr{
margin-bottom:1em;
}
ul{
padding-left:1.6em;
}
[/css]
pは段落なのでpとpの間にはmarginが欲しいです。

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

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

これに隣接兄弟選択子をつかうと、(ulやpに余計なclass指定をせずに)pとulが隣接する場合のmarginを指定出来ます!
[css]
/* 追加 */
p + ul{
margin-top:-1em;
}
[/css]
参考スクリーンショット
隣接兄弟選択子あり

  • このエントリーをはてなブックマークに追加
  • LINEで送る

SNSでもご購読できます。

コメントを残す


You can add images to your comment by clicking here.