PeaceJetのブログ

金融系の社内エンジニアをやりながら、マーケティングやプランナーなども

【html / CSS】 :nth-child の使い方【からあと】

今回は、「~(なになに)からあとに対して・・・したい」といったような
ニーズに対処するために「:nth-child」の使い方を簡単にまとめてみました。

ある一つのものに対して、スタイルを充てる場合。

td:nth-child(1) {
    color:red;
}

~(なになに)以降に対して・・・する場合。

ここでは、3番目以降の要素に対してスタイルを充てます。

td:nth-child(n+3) {
    color:red;
}

最初の3個だけスタイルを充てる場合。

li:nth-child(-n+3) {
    color:red;
}