[CSS3]loopで威力を発揮する隣接セレクタ。

Winwdows XPのサポート終了に伴い、積極的にCSS3を業務案件に取り入れるようになってきました。

自分が最近良く使うのは隣接セレクタです。
WordPress案件でのloopの中で、段落同士はマージンを開けて、見出しが出てきたら次の段落は間隔を近づける、というスタイルをちょくちょく使います。

記述例

h2とpが隣り合った時だけ、h2とpの間隔を狭めたい場合の書き方です。

CSS

h1, h2, p{
    margin: 20px;
}

h2 + p {
    margin-top: -15px; /*h2とpが隣り合ったときのみ摘要される*/
}

html

<h1>タイトル</h1>
<h2>サブタイトル</h2>
<p>本文</p>
<h2>サブタイトル</h2>
<p>本文</p>
<p>本文</p>
<p>本文</p>