Menu
I have a list item where I'd like the 4th item and onwards to have a different background-color.
I've tried the following:
li:nth-child(4) { background-color:blue; } This styles only the 4th item. I then tried the following in the hope that it would style 4th item and onwards, but it didn't work:
li:nth-child(4+) { background-color:blue; } How can I get this to work without having to specify 4th, 5th, 6th, 7th etc...?
429
The :nth-last-child(n) selector matches every element that is the nth child, regardless of type, of its parent, counting from the last child. n can be a number, a keyword, or a formula.
Definition and UsageThe :nth-child(n) selector matches every element that is the nth child of its parent. n can be a number, a keyword (odd or even), or a formula (like an + b). Tip: Look at the :nth-of-type() selector to select the element that is the nth child, of the same type (tag name), of its parent.
Use the querySelector() method to get the nth child of an element, e.g. document. querySelector('#parent :nth-child(3)') . The :nth-child pseudo class returns the element that matches the provided position.
Use :nth-child(n+5) (CSS indexes start at 1).
li:nth-child(n+5) { background-color:blue; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
