概要
たとえば縦に並んだリストの要素間だけに横の境界線を引いたり、横に並んだ要素の左右以外の間にだけ縦の境界線を引きたい場合。
隣接セレクターを使う方法
以下の例は、li要素に対して隣接セレクター（隣接兄弟結合子：adjacent sibling combinator）を利用している。
HTML
|
1 2 3 4 5 6 7 |
<ul class="adjacent"> <li><span>1番目のアイテム</span></li> <li><span>2番目のアイテム</span></li> <li><span>3番目のアイテム</span></li> <li><span>4番目のアイテム</span></li> <li><span>5番目のアイテム</span></li> </ul> |
CSS
|
1 2 3 4 5 6 7 |
ul { list-style-type: none; } .adjacent li + li span { border-top: solid 1px #000; } |
隣接セレクターは、セレクターAとセレクターBを'+'結合子でつなぐ。そうすると、BのうちAの直後に置かれたもののみにスタイルが適用される。
上の例では、先頭のli要素にはその前のli要素がないのでスタイルが適用されない。2番目以降のli要素には直前のli要素があるので上線が引かれる。その結果、最初のli要素の上側と最後のli要素の下側には線が引かれず、li要素間にのみ線が引かれることになる。
なお上の例では、
- adjacentクラスの中のli要素にのみ対象としている
- ブロック要素であるliの中にインライン要素のspanを置き、そのspanに対して上線を引いている
疑似クラスを使う方法
疑似クラスを使って以下のようにしても実現できる。
- 全ての要素に上線を引く
- 最初の要素だけ境界なしとしてオーバーライド
HTML
|
1 2 3 4 5 6 7 |
<ul class="pseudo"> <li><span>1番目のアイテム</span></li> <li><span>2番目のアイテム</span></li> <li><span>3番目のアイテム</span></li> <li><span>4番目のアイテム</span></li> <li><span>5番目のアイテム</span></li> </ul> |
CSS
|
1 2 3 4 5 6 7 |
.pseudo li span { border-top: solid 1px #00f; } .pseudo li:first-child span { border: none; } |
この方法は、一旦全要素に線を引いてから1つ目を消すという2度手間になっている。
なお、上線とfirst-childの代わりに下線とlast-childでも同様のことが実現できる。
クラスを使う方法
ブラウザーによって隣接セレクターや疑似クラスが使えない場合は、最初か最後のli要素にクラスを指定して、疑似クラスと似たような方法で線を消す。