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

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

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

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

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

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.