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