CSSでリストの最初だけborderなどのスタイルを打ち消すベストな方法

Webデザインがよくできるという人でも意外と使ってしまっているのがCSSの打ち消しです。CSSの設計上、打ち消しというのはあまりよくありません。none とか 0 とか初期のスタイルをわざわざ書いているからです。そこで、できるだけ打ち消しをしないコーディングの一例として今回の方法を紹介します。

多くの人がやっている打ち消し

  
リスト1
  
リスト2
  
リスト3
  
リスト4
  
リスト5

.list {
  border-top: 2px dashed #FFB300;
}

このように一番上の線が余分ですよね。

.list {
  border-top: 2px dashed #FFB300;
}
.list:first-child {
  border: none;
}

:first-child を使って一番上の線を消すことができます。しかし、この記述で３行も使ってしまうのです。今は、border だけなので３行で済んでいますが、場合によってはもっと多くなります。

CSS3を使ってみる

.list:not(:first-child) {
  border-top: 2px dashed #FFB300;
}

CSS3の :not() を使えば最初のリスト以外といった表現ができます。IE8では使えないというのが唯一の欠点でしょうか。

ベストなコーディング

.list + .list {
  border-top: 2px dashed #FFB300;
}

隣接セレクタを使うと簡単に解決できます。.list が一番目の要素を表しており、+ .list がそれ以降の要素を表しています。つまり、一番目の要素だけ除外されます。これなら、IE8でも使えるので、実際のWeb制作に使えるテクニックだと思います。