【CSS】忘れがちな疑似クラスnth-childの使い方

nth-childはcssでHTMLの要素を指定する疑似クラスの一つで、対象の子要素のn番目にスタイルを適用することが出来ます。

使い方としては、tableのヘッダーのwidthを指定する場合など

table thead tr:nth-child(1){ width:50px; }
table thead tr:nth-child(2){ width:100px; }
table thead tr:nth-child(3){ width:120px; }

リストなどを縞模様になるようにスタイルを適用したい場合など
偶数番目に適用する場合

ul li:nth-child(even){ background-color:#ededed; }

奇数番目に適用する場合

ul li:nth-child(odd){ background-color:#ededed; }

その他は以下のような指定方法もあります
最初の要素に適用したい場合は「:first-child」
最後の要素に適用したい場合は「:last-child」

覚えておくと便利なのでぜひ参考にしてみてください。