I currently have this long rule
#content #wrapper table td:nth-child(3),
#content #wrapper table td:nth-child(4),
#content #wrapper table td:nth-child(5) {
width: 30px;
}
is it possible to combine the nth-child to something shorter like nth-child(3,4,5)
instead of 3 separate lines?
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.
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.
As a general rule, if you want to select an interval of a selector regardless of the type of element it is, use nth-child . However, if you want to select a specific type only and apply an interval selection from there, use nth-of-type .
Functional notation n is all nonnegative integers, starting from 0.
Not directly based on your code, but this should give you an idea.
ul li:nth-child(n+3):nth-child(-n+7){ }
This should do the trick:
#content #wrapper table td:nth-child(n+3):nth-child(-n+5) {
width: 30px;
}
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