:nth-child
li:nth-child(5) {
background-color: #ff00ff;
}
Using :nth-child(5) it allows you to specifically choose to change only the 5th element in the parent element.
Example:
- Some Text Here
- Some Text Here
- Some Text Here
- Some Text Here
- Some Text Here
- Some Text Here
- Some Text Here
Positive Child Ranges
li:nth-child(n+5) {
background-color: #ffff00;
}
Using the :nth-child(n+5) like this allows you pick :nth-child(5) and above.
Example:
- Some Text Here
- Some Text Here
- Some Text Here
- Some Text Here
- Some Text Here
- Some Text Here
- Some Text Here
Negative Child Ranges
li:nth-child(-n+5) {
background-color: #ff0000;
}
Using the :nth-child(-n+5) like this allows you pick :nth-child(5) and below.
Example:
- Some Text Here
- Some Text Here
- Some Text Here
- Some Text Here
- Some Text Here
- Some Text Here
- Some Text Here
