Help us understand the problem. What is going on with this article?

隣接セレクタの使い時

More than 5 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番目以降は全て同じ」
ことに注目する。

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away