要素の間に線を引く為の３つの方法

Tweet

Category css 2013/03/06

問題

リストの間に線を引きたいけど、最初と最後は線を引いて欲しくない。

こうすると一番上のリストの上にも線が引かれてしまう。

    .example > li {border-top:1px solid red;}

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

答え

CSSの疑似要素で対応する場合

ul > li:first-child{border-top:none;}

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

CSS3の疑似セレクタ:first-childに対応していないブラウザは表示されてしまうが、該当するのはIE6(7)なので、IE6(7)には対応しない場合はこれでよいでしょう。

（※IE7は対応はしていますが別の仕様によって悩まされることがあります。）

jQueryで対応する場合

$('ul > li:frist-child').css("borderTop","none");

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

ひととおりのブラウザでちゃんと表示される。ただし、CSSと分離されたところに記載することになるため、管理がめんどう。

そもそもCSSで何とかできる

ul{ 
    overflow:hidden; 
} 
ul > li{ 
    border-top:1px solid red;
    margin-top:-1px;
}

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

ネガティブマージンを使えばスタイルシートだけでできたりする。あまり詳しくない人がCSSを見たときに何してるかわからないのが問題かも。