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

• 1
• 2
• 3
• 4
• 5

​

//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.