nth-child CSS pseudo-class Christmas colors

Lately /me noticed HN using Christmas color scheme for their post numbering, but the source sadly read <font color="#be2828">1.</font> below is some silly code emulating the same behavior without font tag indeed!

nth-child CSS pesudo-class syntax is pretty simple : element:nth-child(an + b) { style properties } that is matches an element that has an+b-1 siblings before it in the document tree, for a given positive or zero value for n, and has a parent element.

So we want the Christmas coloring for ul, we can code as below :

//html
<ul>  
    <li>1</li>  
    <li>2</li>  
    <li>3</li>  
    <li>4</li>  
    <li>5</li>  
</ul>​
 
//css
li { color: blue }  
li:nth-child(odd) { color:green }  
li:nth-child(even) { color:red }

Checkout the demo and play around.

More examples from MDN :

tr:nth-child(2n+1) Represents the odd rows of an HTML table.

tr:nth-child(odd) Represents the odd rows of an HTML table.

tr:nth-child(2n) Represents the even rows of an HTML table.

tr:nth-child(even) Represents the even rows of an HTML table.

span:nth-child(0n+1) Represents a span element which is the first child of its parent; this is the same as the :first-child selector.

span:nth-child(1) Equivalent to the above.

span:nth-child(-n+3)Three first span elements.

Share this