:nth-child() pseudo-class のテストのスクリーンショット
今日のチェックイン？ - Another 朝顔日記 の続きです。とりあえず以下のような html の table を表示したところをスクリーンショットにしてみました。
<table>
<tr><td>ほげ</td><td>ふが</td><td>ほげ</td><td>ふが</td></tr>
<tr><td>もげ</td><td>むが</td><td>ほげ</td><td>ふが</td></tr>
<tr><td>ほげ</td><td>ふが</td><td>ほげ</td><td>ふが</td></tr>
<tr><td>もげ</td><td>むが</td><td>ほげ</td><td>ふが</td></tr>
<tr><td>ほげ</td><td>ふが</td><td>ほげ</td><td>ふが</td></tr>
<tr><td>もげ</td><td>むが</td><td>ほげ</td><td>ふが</td></tr>
<tr><td>ほげ</td><td>ふが</td><td>ほげ</td><td>ふが</td></tr>
<tr><td>もげ</td><td>むが</td><td>ほげ</td><td>ふが</td></tr>
</table>コレに当てたスタイルは以下の通り。
tr:nth-child(odd) {
background-color:#ccf;
}
tr:nth-child(even) {
background-color:#cfc;
}
td:nth-child(odd) {
color:red;
}
td:nth-child(even) {
color:black;
}