Explaining :nth-child pseudo-classes

In most situations the HTML elements ul (unordered list) and li (list item) are used to set up a list of repeatable items. Although this way of styling can be used on all kinds of elements.

First and last

Select the first or the last child.
[css]li:first-child{}
li:last-child{}[/css]

Select the first or the last child, with the type div.

[css]div:first-of-type{}
div:last-of-type{}[/css]

Select all elements, but not the first or the last one.

[css]li:not(:first-child){}
li:not(:last-child){}[/css]

Select all elements, with the type div, but not the first or the last one.

[css]div:not(:first-of-type){}
div:not(:last-of-type){}[/css]

Odd and even

Select only the odd/even elements.
[css]li:nth-child(odd){}
li:nth-child(even){}[/css]

Select only the odd/even elements, with the type div.
[css]div:nth-of-type(odd){}
div:nth-of-type(even){}[/css]

Specific numbers

Select only the fifth child.

[css]li:nth-child(5){}[/css]

Select only the fifth child from the end.

[css]li:nth-last-child(5){}[/css]

Select the fifth child, and everything before it.

[css]li:nth-child(-n+5){}[/css]

Select the fifth child, and everything after it.

[css]li:nth-child(n+5){}[/css]

Select every fifth child, starting at the first.

[css]li:nth-child(5n+1){}[/css]