ひみつ結社ラボファイブ　｜　WEB一年生のためのお役立ち情報ブログ

リストや表で、最後または最後の項目だけ線を消したい
～隣接セレクタ（ネイバーセレクタ）での実装～

リストや表をデザインするとき、各項目に下線を付けたいけど一番下の項目だけ下線を取りたい・・・という場面もあると思います。
例えば下記のようなリストにしたい場合、一番最後のliタグにクラスを付けてボーダーを消すこともできます。

ですが、htmlソースが冗長になるうえ、後で項目を追加するときにクラスを付け替え忘れたり・・・という可能性も。
そこで今回は、htmlは出来るだけプレーンなまま、CSSの工夫でボーダー表示の調整を実現したいと思います。

【ポイント】「＋（隣接セレクタ）」を使う

「overflow: hidden;」とネガティブマージンで線を消す方法もありますが、今回は考え方が比較的簡単な、隣接セレクタを使った方法をご紹介します。
隣接セレクタは例えばh2+p {margin-top:20px;}のように記述します。
この例でいうと、「h2 と隣接した p の上マージンを20pxとる」という意味になります。
（h2 と p、どっちに対しての指定なの！？と混乱しそうですが、主体は「＋」の左側、ここでは「p」となります）
下記のようにhtmlを書けば、1つ目の p の上にだけ20pxのマージンがつくことになります。

<h2>らぼごくんのヒミツ</h2>
<p>らぼごくんのヒミツを教えちゃいます。</p>
<p>実はらぼごくんには兄弟がたくさんいるんです！</p>

（隣接セレクタについて参考サイト：http://hp.vector.co.jp/authors/VA022006/css/selector.html#adjacent-selectors）

では、隣接セレクタをリストのデザインに応用してみましょう。
次のようなhtmlソースでリストを作成し、各項目の区切り線としてborderを使います。

<ul class="naviR">
<li>らぼごくんについて</li>
<li>らぼごニュース</li>
<li>らぼごヒストリー</li>
<li>らぼごくんの仲間たち</li>
</ul>

liの下に線を付けるため、下記のようにCSSを書きました。

ul.naviR{
 width:210px;
 border:1px solid #999966;
}
ul.naviR li{
 padding:10px 5px 5px;
 border-bottom:1px dashed #999966;
}

しかし、この記述だと一番下のliにも下線が出てしまい、かっこうよくありません。
そこで隣接セレクタを使ってこのいらない下線を出さないように工夫します。

考え方としては、1つ目のliのみ直前にliタグがないことに注目します。
1つ目のliだけがliと隣接していないのです。（2つ目のliと隣接してるじゃん！とも思いたくなりますが、「後」ではなく「前」にあるタグが対象になるのであしからず・・・）
ですので、「li+li」と書けば2つ目以降のliにだけスタイルを指定することができます。
今回はliとliの間にボーダーを入れたいので、2つ目以降のliの上にだけ線を表示してはどうでしょうか？

そこで、CSSを下記の＜CSS変更後＞のように記述します。
border-bottom:1px dashed #999966;をやめ、
————————————–
ul.naviR li+li{
 border-top:1px dashed #999966;
}
————————————–
を追加しました。
これによりliタグと隣接しているliタグのみ（つまり1つ目のliタグ以外）に上線が表示されます。

＜CSS変更後＞

ul.naviR{
 width:210px;
 border:1px solid #999966;
}
ul.naviR li{
 padding:10px 5px 5px;
}
ul.naviR li+li{
 border-top:1px dashed #999966
}

HTMLソースは、下記のままでOKです。

<ul class="naviR">
<li>らぼごくんについて</li>
<li>らぼごニュース</li>
<li>らぼごヒストリー</li>
<li>らぼごくんの仲間たち</li>
</ul>

これで、htmlを極力いじらずに思うとおりのデザインを実現できました。

【ブラウザ対応状況】
IE6では隣接セレクタが効かないようですが、他のモダンブラウザでは概ね問題ありません。

応用

テーブルのセルにこの方法でラインを付けたい場合、「td+td」ではできません。
テーブルの場合、「trが連続している時のtdにだけ線を付ける」と考え、下記のように記述すればOKです。

table.hyou1 tr+tr td{
 border-top:1px solid #999966;
}