liタグはサイトを作る際によく使われるタグのひとつだと思います。
リンクをがががっと並べるときに良く使いますよね。
そのliタグに一括でスタイルを指定したとき、「ここだけ変えたい」っていうことも多くて、そんなときに活用する「nth-child」っていう擬似クラスのまとめです。
例１：4色の背景色を互い違いにしたい場合
偶数番目、奇数版目であれば
/* 奇数番目 */
.BGcolor li:nth-child(2n+1){
background-color:#ffffcc;
}
/* 偶数番目 */
.BGcolor li:nth-child(2n){
background-color:#ffeeee;
}
と記述すれば大丈夫ですが、4色使いたい場合は、1段目と3段目も異なるものにしたいということもあると思うので、そのときは下記のように記述します。
div.BGcolor li:nth-child(4n+1){
background-color:#ffffcc;
}
div.BGcolor li:nth-child(4n+2){
background-color:#ffeeee;
}
div.BGcolor li:nth-child(4n+3){
background-color:#eeffee;
}
div.BGcolor li:nth-child(4n+4){
background-color:#f7ffef;
}
例２：10個ある要素の5個目まで適用させて残り5個は適用させない
「あかさたなはまやらわ」の10文字を2段に並べて、2pxのボーダーで囲いたい時、全部を2pxのボーダーで指定すると重なって4pxの太さになるところが出てくるため下記のように指定しました。
きれいなボーダーで囲われます。
ちなみに、float:leftを解除する箇所で「li:nth-child(5n+1)」としておけば2段目以上のレイアウトにした場合、たとえば3段にしても4段にしても適用されるので応用がききます。これを「li:nth-child(6)」としてしまうと、11個目にはきかないということですね。
.aiueo {
position: relative;
overflow: hidden;
text-align:center;
margin:10px 0 10px 0;
}
.aiueo > ul {
position: relative;
left: 50%;
float: left;
}
/* すべてに右と下のボーダー */
.aiueo > ul > li {
list-style:none;
border-right:2px solid #cccccc;
border-bottom:2px solid #cccccc;
position: relative;
left: -50%;
float: left;
padding-top:10px;
}
/* 1つ目だけに左のボーダー */
.aiueo > ul > li:first-child {
border-left:2px solid #cccccc;
}
/* 上の段だけ(5個目まで)に上のボーダー */
.aiueo > ul > li:nth-child(-n+5) {
border-top:2px solid #cccccc;
}
/* 6個目だけにfloat:left解除と左のボーダー */
.aiueo > ul > li:nth-child(5n+1) {
border-left:2px solid #cccccc;
clear: left;
}
.aiueo > ul > li > a{
width:60px;
height:30px;
float:left;
display:block;
}
関連記事
上記のソースでfloat:leftしたボックスを中央寄せにする方法も実践してますので、下記のエントリーも参照してみてください。
例３：最初だけと、最後だけ
上の例でも出てきましたが、最も良く使うfirst-childとlast-childを書いてこのエントリーを締めくくります。
使い方としては、上下にボーダー引きたいときに一括でborder-bottomだけ指定して最初の要素にborder-topをつけたり、最後だけbox-shadowをかけたり、前後の間隔を調整したりするのに使うと便利です。
/* 共通して適用させたいもの */
.content{
border-bottom:1px solid #cccccc;
margin:10px 0;
}
/* 1つ目だけ多めに余白を持たせて上にもボーダーを引く */
.content li:first-child {
border-top:1px solid #cccccc;
margin-top:20px;
}
/* 最後にだけ下にシャドウをつける */
.content li:last-child {
-webkit-box-shadow: 0px 3px 5px 0px #aaaaaa; /* Safari, Chrome用 */
-moz-box-shadow: 0px 3px 5px 0px #aaaaaa; /* Firefox用 */
box-shadow: 0px 3px 5px 0px #aaaaaa; /* CSS3 */
}
最後に
どれもこれも一例です。今回紹介したものをいろいろ応用して使ってみてください。
僕は割りと忘れちゃうことが多いんでこれをコピペして使えればいいかなと思ってます。