li要素に上ボーダーをつけて、最後のli要素のみ下側にもボーダーを加える例。
- サンプルテキストサンプルテキストサンプルテキスト
- サンプルテキストサンプルテキストサンプルテキスト
- サンプルテキストサンプルテキストサンプルテキスト
- サンプルテキストサンプルテキストサンプルテキスト
- サンプルテキストサンプルテキストサンプルテキスト
テーブルの最後の2行にだけ背景をつけたい例。
1行目 |
ここは1行目ですー。ここは1行目ですー。 |
2行目 |
ここは2行目ですー。ここは2行目ですー。 |
3行目 |
ここは3行目ですー。ここは3行目ですー。 |
4行目 |
ここは4行目ですー。ここは4行目ですー。 |
5行目 |
ここは5行目ですー。ここは5行目ですー。 |
6行目 |
ここは6行目ですー。ここは6行目ですー。 |
このサンプルのCSS
li{
border-top:1px solid #999;
}
li:nth-last-child(1){
border-bottom:1px solid #999;
}
tr:nth-last-child(-n+2){
background:#fcc; /* 背景色・ピンク */
}
このサンプルのHTML
<ul>
<li>サンプルテキストサンプルテキストサンプルテキスト</li>
<li>サンプルテキストサンプルテキストサンプルテキスト</li>
<li>サンプルテキストサンプルテキストサンプルテキスト</li>
<li>サンプルテキストサンプルテキストサンプルテキスト</li>
<li>サンプルテキストサンプルテキストサンプルテキスト</li>
</ul>
<table>
<tr>
<th>1行目</th>
<td>ここは1行目ですー。ここは1行目ですー。</td>
</tr>
<tr>
<th>2行目</th>
<td>ここは2行目ですー。ここは2行目ですー。</td>
</tr>
<tr>
<th>3行目</th>
<td>ここは3行目ですー。ここは3行目ですー。</td>
</tr>
<tr>
<th>4行目</th>
<td>ここは4行目ですー。ここは4行目ですー。</td>
</tr>
<tr>
<th>5行目</th>
<td>ここは5行目ですー。ここは5行目ですー。</td>
</tr>
<tr>
<th>6行目</th>
<td>ここは6行目ですー。ここは6行目ですー。</td>
</tr>
</table>