SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

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

問題

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

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

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

答え

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

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

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

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

jQueryで対応する場合

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

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

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

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

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

関連するメモ

コメント