同じクラスに疑似クラスをつけるCSSです。
今まで使ったことなかったのでメモしておきます。
例えば、リストliタグを使って表示したものに色を変えたい場合などに使えます。
html
- 赤色
- 青色
- 緑色
- 黄色
CSS
ul li:nth-child(1) {color:#fcc;}
ul li:nth-child(2) {color:#ccf;}
ul li:nth-child(3) {color:#cfc;}
ul li:nth-child(4) {color:#ffc;}
とするとそれぞれ色が変わります。
ちょっと面白いのはここのサイトで紹介されているように
http://www.htmq.com/selector/nth-child.shtml
table.sample tr:nth-child(2n+1) {background-color:#FFCCCC;}
table.sample tr:nth-child(2n+0) {background-color:#CCFFCC;}
と書くと、セルごとに色を交互に変えるとかできるようです。