Menu
div div p:nth-child(1 to 5)
How can I select multiple numbers with the nth-child, so I get the child elements 1 to 5 without having to write:
div div p:nth-child(1),
div div p:nth-child(2),
div div p:nth-child(3),
div div p:nth-child(4),
div div p:nth-child(5) {
}
So it should look like this:
div div p:nth-child(1 to 5)
708
The :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.
formula (an + b) In addition to the value n being able to be any number, you can also use a formula. nth-child(3n) would affect every third child element. nth-child(3n+1) would apply to every third element starting from the first one.
The :nth-child selector allows you to select one or more elements based on their source order, according to a formula. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling elements.
Selecting multiple elements To select multiple elements, you can simply click and drag your cursor over your them. Alternatively, hold down the Ctrl / Shift key on your keyboard (Cmd key for Mac) and click the elements to select them. Tip: You can select all elements at once by pressing Ctrl+A on your keyboard.
div div p:nth-child(n+1):nth-child(-n+5){
}
will select elements 1 to 5
128
div div p:nth-child(-n+5){
}
This will select the first 5 children.
33
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
