SitePoint
Reference
CSS
Selector Reference
Pseudo-classes
CSS3 Pseudo-classes
:nth-child(N)
CSS Live Demo: :nth-child(N)
(this page)
See also:
All Live Demos
CSS Live Demo: :nth-child(N)
Type your
CSS
here:
(any properties allowed except expression, behavior and @import)
tr:nth-child(2n+1) { background:#ffc; font-style:italic; } tr { background:#cef; font-style:normal; }
Type your
HTML
here:
(any tags allowed except script, iframe, frame, object, img and embed)
<table cellpadding="0" cellspacing="0" border="1" summary="This table charts the actors who played Dr Who in the original television series, and the years they held the role"> <caption>Original series</caption> <thead id="foo"> <th id="actor">Actor</th> <th id="years">Years</th> </thead> <tbody> <tr> <th id="wh" headers="actor">William Hartnell</th> <td headers="wh years">1963-66</td> </tr> <tr> <th id="pt" headers="actor">Patrick Troughton</th> <td headers="pt years">1966-69</td> </tr> <tr> <th id="jp" headers="actor">Jon Pertwee</th> <td headers="jp years">1970-74</td> </tr> <tr> <th id="tb" headers="actor">Tom Baker</th> <td headers="tb years">1974-81</td> </tr> <tr> <th id="pd" headers="actor">Peter Davison</th> <td headers="pd years">1981-84</td> </tr> <tr> <th id="cb" headers="actor">Colin Baker</th> <td headers="cb years">1984-86</td> </tr> <tr> <th id="sm" headers="actor">Sylvester McCoy</th> <td headers="sm years">1987-89</td> </tr> </tbody> </table>
Show me!
Your results appear here: