Mastering the :nth-child | CSS3 pseudo classes and :nth-child ranges

Mastering the :nth-child

Using :nth-child

:nth-child
:nth-child(8)

li:nth-child(8) span {    background-color: #298EB2;    box-shadow: -3px -3px 10px rgba(0, 0, 0, 0.4), inset 0 0 10px black;}

Using :nth-child(8) it allows you to specifically choose to change only the 8th element in the parent element

Using the :nth-child ranges

Positive Child Ranges
:nth-child(n+6)

li:nth-child(n+6) span {    background-color: #298EB2;    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;}

Using the :nth-child(n+6) like this allows you pick :nth-child(6) and above

Negative Child Ranges
:nth-child(-n+9)

li:nth-child(-n+9) span {    background-color: #298EB2;    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;}

Using the :nth-child(-n+9) like this allows you pick :nth-child(9) and below

Generic Child Ranges
nth-child(n+4):nth-child(-n+8)

li:nth-child(n+4):nth-child(-n+8) span {    background-color: #298EB2;    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;}

Using this nth-child(n+4):nth-child(-n+8) we can select elements within certain ranges, in this case elements 4-8.

Advanced Generic Child Ranges
nth-child(n+2):nth-child(odd):nth-child(-n+9)

li:nth-child(n+2):nth-child(odd):nth-child(-n+9) span {    background-color: #298EB2;    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;}

Using this nth-child(n+2):nth-child(odd):nth-child(-n+9) we can select elements within certain ranges (2-9) that are odd-numbered children.

nth-child(3n+1):nth-child(even)

li:nth-child(n+2):nth-child(odd):nth-child(-n+9) span {    background-color: #298EB2;    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;}

Using this :nth-child(3n+1) would normally highlight children 1, 4, 7 & 10, but by using the :nth-child(even) we filter out the odd numbered children 1 & 7 leaving only the children 4 & 10.

Using the :nth-of-type

:nth-of-type
:nth-of-type(3)

/* these are represented with blue circles */span:nth-of-type(3) {    background-color: #298EB2;    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;}/* these are represented with orange squares */div:nth-of-type(4) {    background-color: #E17149:    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black; }

Using the :nth-of-type() allows you to select a specific child within a type of element, within the same parent element.

Using the :nth-of-type Ranges

Using Positive Type Ranges
span:nth-of-type(n+3)
div:nth-of-type(2n+2)

/* these are represented with blue circles */span:nth-of-type(n+3) {    background-color: #298EB2;    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;}/* these are represented with orange squares */div:nth-of-type(2n+2) {    background-color: #E17149:    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black; }

Using span:nth-of-type(n+3) or div:nth-of-type(2n+2) like this allows you to pick elements greater than the value in the same type, within the same parent element..

Using Negative Type Ranges
span:nth-of-type(-n+4)
div:nth-of-type(-n+5)

/* these are represented with blue circles */span:nth-of-type(-n+4) {    background-color: #298EB2;    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;}/* these are represented with orange squares */div:nth-of-type(-n+5) {    background-color: #E17149:    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black; }

Using span:nth-of-type(-n+4) or div:nth-of-type(-n+5) like this allows you to pick elements less than the value in the same type, within the same parent element.

Using Generic Type Ranges
span:nth-of-type(n+3):nth-of-type(-n+6)
div:nth-of-type(n+1):nth-of-type(-n+3)

/* these are represented with blue circles */span:nth-of-type(n+3):nth-of-type(-n+6) {    background-color: #298EB2;    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;}/* these are represented with orange squares */div:nth-of-type(n+1):n-th-of-type(-n+3) {    background-color: #E17149:    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;}

Using :nth-of-type(n+3):nth-of-type(-n+6) or div:nth-of-type(n+1):nth-of-type(-n+3)this way allows you to select a generic range of a type of element, within the same parent element. In this example you see that I have selected the squares 1-3 and circles 3-6.

Using Advanced Generic Type Ranges
span:nth-of-type(n+3):nth-of-type(odd):nth-of-type(-n+6)
div:nth-of-type(n+1):nth-of-type(even):nth-of-type(-n+3)

/* these are represented with blue circles */span:nth-of-type(n+3):nth-of-type(odd):nth-of-type(-n+7) {    background-color: #298EB2;    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;}/* these are represented with orange squares */div:nth-of-type(n+1):nth-ofo-type(even):nth-of-type(-n+3)  {    background-color: #E17149:    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black; }

Using the span:nth-of-type(n+3):nth-of-type(odd):nth-of-type(-n+6) or div:nth-of-type(n+1):nth-of-type(even):nth-of-type(-n+3) allows you to select a generic range and filter the results based on odd and even. So normally it would have highlighted squares 1-3 and circles 3-6. But by using odd and even we can filter out those by ranges, so we are left with circles 3 & 5 and square 2.