読者です 読者をやめる 読者になる 読者になる

CSS の nth-child

CSS

CSS の nth-child の書き方、解ってるんだけど、ちょっとパターンが複雑になると

迷うことがあるのでメモ

td:nth-child(odd){ background-color: #ffffcc; } 奇数

1 2 3 4 5 6 7 8 9 10 11

td:nth-child(even){ background-color: #ffffcc; } 偶数

1 2 3 4 5 6 7 8 9 10 11

td:nth-child(n+3){ background-color: #ffffcc; } 3番目~

1 2 3 4 5 6 7 8 9 10 11

td:nth-child(-n+6){ background-color: #ffffcc; } 6番目まで

1 2 3 4 5 6 7 8 9 10 11

td:nth-child(3n+2){ background-color: #ffffcc; }
 2番目から3個目を繰り返す

1 2 3 4 5 6 7 8 9 10 11

td:nth-child(n+3):nth-child(-n+6){ background-color: #ffffcc; }
 3番目~6番目まで

1 2 3 4 5 6 7 8 9 10 11

td:last-child{ background-color: #ffffcc; } 最後

1 2 3 4 5 6 7 8 9 10 11

td:last-child(2){ background-color: #ffffcc; } 最後から2個目

1 2 3 4 5 6 7 8 9 10 11

さらに、nth-child は、繰り返しパターンで float の clear を効かせる方法がある。

ul{   width: 800px; }
li {
     float: left;
     list-style: none;
     text-align: center;
     width: 100px;
     margin: 10px;
    border: 1px solid #808080;
}
/* 3個並んだら→折り返す */
li:nth-child(3n+1){
    clear: both;
}

とリストのスタイルを用意してアイコン(Web-font アイコンでもなんでもいい)

を書いて、、

<ul class="sample">
<li><span class="icon-home"></span></li>
<li><span class="icon-folder"></span></li>
<li><span class="icon-folder-open"></span></li>
<li><span class="icon-folder-download"></span></li>
</ul>

f:id:posturan:20160619113202j:plain

4個目は折り返す。table の表を li タグで書くなら全体幅を決めて nth-child で

clear: both を効かせる。プログラムで動的に表を書くならこの方法も1つの良い方法だ。