---
title: "Nth-child CSS Pseudo-class Christmas Colors"
description: "Lately /me noticed HN using Christmas color scheme for their post numbering, but the source sadly read 1. below is some."
url: "https://h3manth.com/scribe/nth-child-css-pseudo-class-christmas-colors/"
canonical_url: "https://h3manth.com/scribe/nth-child-css-pseudo-class-christmas-colors/"
markdown_url: "https://h3manth.com/scribe/blog/nth-child-css-pseudo-class-christmas-colors.md"
publishDate: "2012-12-25T00:00:00.000Z"
author: "Hemanth HM"
category: "web"
tags: ["web"]
word_count: 196
reading_time_minutes: 1
x_markdown_tokens: 409
content_signal: "ai-train=yes, search=yes, ai-input=yes"
---

# Nth-child CSS Pseudo-class Christmas Colors

> Lately /me noticed HN using Christmas color scheme for their post numbering, but the source sadly read 1. below is some.

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](http://jsfiddle.net/gnumanth/H7Ubu/) 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.

```bash
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.