CSS

隣接セレクタの使い時

More than 3 years have passed since last update.

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

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番目以降は全て同じ」

ことに注目する。

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