Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to combine nth-child() rules into one?

Tags:

html

css

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?

like image 343
skyisred Avatar asked Mar 05 '13 20:03

skyisred


People also ask

How do Nth children choose multiple children?

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.

What is the nth child () selector used for?

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.

What's the difference between the nth of type () and Nth child () selector?

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 .

Does nth child start at 0 or 1?

Functional notation n is all nonnegative integers, starting from 0.


2 Answers

Not directly based on your code, but this should give you an idea.

ul li:nth-child(n+3):nth-child(-n+7){ }
like image 37
Ares Avatar answered Sep 28 '22 23:09

Ares


This should do the trick:

#content #wrapper table td:nth-child(n+3):nth-child(-n+5) {
    width: 30px;
}
like image 137
Mert Yazıcıoğlu Avatar answered Sep 28 '22 23:09

Mert Yazıcıoğlu