隣接セレクタの使い時

リストを並べる際に下記みたく仕切り線を引きたい。

A　|　B　|　C　|　D　|　E　

こんな表示をしたい時は隣接セレクタ「+」を使うと便利。

よく見る方法

list.html

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li class="last">E</li>
</ul>

style.css

li {
  display: inline-block;
  border-right: 1px solid #000;
}

li.last {
  border-style: none;
}
/*** CSS3対応ブラウザであれば .last は撤去し last-childに置き換え可能 ***
/*
li:last-child {
  border-style: none;
*/

隣接セレクタを使用した方法

list.html

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
</ul>

style.css

li {
  display: inline-block;
}

li + li {
  border-left: 1px solid #000;
}

メリット

• クラスを付与しないので、htmlの更新が楽
• CSS2なのでIE7にも対応ok ;)

ポイント

「最後の要素だけ打ち消し」
ではなく
「2番目以降は全て同じ」
ことに注目する。

リスト以外にも幅広く使えるので便利。