CSSだけで指定できるセレクター

こんにちは、スウェルデザインのWです。

今回は諸事情があってあまりHTMLを弄りたくないコーディングをしています。
CSSでどうにかできないかと調べたところ、今までしたことのない指定の仕方でスタイルを付けられる事がわかったのでここに紹介します。

例えばこのテーブル↓

1	2	3
4	5	6
7	8	9

テーブルの左上だけにbackgroundで色を付けたい これをCSSのみで指定します。

td:first-child{
    background: #BDE3FF;
}

【:first-child】は最初のtdにスタイルをあてる記述になります。

1	2	3
4	5	6
7	8	9

こうなります。

ーー－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

逆にテーブルの右下だけにbackgroundで色を付けたい
これをCSSのみで指定します。

td:last-child{
    background: #BDE3FF;
}

【:last-child】は最後のtdにスタイルをあてる記述になります。

1	2	3
4	5	6
7	8	9

こうなります。

他にも、【奇数のセルに指定する記述】

td:nth-child(odd){
    background: #BDE3FF;
}

【偶数のセルに指定する記述】

td:nth-child(even){
    background: #BDE3FF;
}

【指定した位置のセルに指定する記述】

td:nth-child(2){
    background: #BDE3FF;
}

（）の中の数値で指定します。