要素セレクタ2

要素セレクタ1の続きです。

下の例は セレクタの「nth-of-type」を使って「冷やし中華」の部分だけを目立たせています。

---

あんこ	シューマイ
いちご	餃子
アイス	ニラレバ
アメ	チャーハン
チョコ	冷やし中華

---

<style type="text/css">
tr:nth-child(odd) {
    background-color:#CCFFFF;
}
tr:nth-child(even) {
    background-color:#FFFFFF;
}
tr:nth-of-type(5)
td:nth-of-type(2) {
    background-color:#FFFF55;
}
</style>
<table border="1" boardercolor="#0000FF">
<tr><td>あんこ</td><td>シューマイ</td></tr>
<tr><td>いちご</td><td>餃子</td></tr>
<tr><td>アイス</td><td>ニラレバ</td></tr>
<tr><td>アメ</td><td>チャーハン</td></tr>
<tr><td>チョコ</td><td>冷やし中華</td></tr>
</table>


セレクタには他に以下の物があります。
下の表もテーブルを使用しているので黄色い部分がありますが（CSSが効いているためです。）、気にしないで下さい。

セレクタ	内容
nth-child(条件)	前から「条件」要素の指定
nth-last-child(条件)	後ろから「条件」要素の指定
nth-of-type(条件)	同一要素を対象として、前から「条件」要素の指定
nth-last-of-type(条件)	同一要素を対象として、後ろから「条件」要素の指定
first-child	最初の要素の指定
last-child	最後の要素の指定