2011/07/25

要素セレクタ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最後の要素の指定

0 件のコメント:

コメントを投稿