PeaceJet

@PeaceJets 2018年、証券会社から転職して人材会社のシステムエンジニアになりました。マーケティングやデータ分析・UI/UX改善などもやっています! #Docker #Ruby #Rails #lambda #GoogleAppsScript #VBA #GitHub http://github.com/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;
}