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>
4個目は折り返す。table の表を li タグで書くなら全体幅を決めて nth-child で
clear: both を効かせる。プログラムで動的に表を書くならこの方法も1つの良い方法だ。