CODEWITHSUNDEEP
htmlcss
Mike Perrenoud
Mike Perrenoud

Reputation: 67928

Setting the same style for multiple nested elements

Okay, I have the following CSS:

.gridViewStyle tr th, .gridViewStyle tr td {
    padding: 5px;
}

And it's working as expected and applying the padding to both the th and td elements. However, do I really have to declare the fully qualified path multiple times? Or in other words, is there a more concise way of doing the same thing?

UPDATE

SPECIFICITY

In regards to specificity, I cannot have this applied to other tables, it must strictly be applied to the grid view with this CSS class.

Upvotes: 2

Views: 67

Answers (4)

Mr. Alien
Mr. Alien

Reputation: 157414

Alternatively you can also do it something like this, will be respecting your specificity too, this is the shortest way you can achieve it

.gridViewStyle th, .gridViewStyle td {
    padding: 5px;
}

Upvotes: 1

wakooka
wakooka

Reputation: 1428

No, not in CSS only though.

There's still CSS preprocessors LESS or SASS which will allow you to do this : 

.gridViewStyle tr 
{
    th, td { padding: 5px; }

}

If you are interested, here are a few links

http://lesscss.org/

http://sass-lang.com/

Upvotes: 0

Levi Botelho
Levi Botelho

Reputation: 25234

You don't need the tr. As both td and th elements will fall within the tr, it is reduntant, as a space selects all descendants (not just children). Therefore,

.gridViewStyle th, .gridViewStyle td {

will work just fine.

Upvotes: 1

Andy
Andy

Reputation: 14575

Depending on specificity, you don't need anything more than th { or td {.

It just depends if you have another table or not. th, td { would be the shortest way if you don't. If you do, that tr is doing nothing (as all th and td should be inside a row, so remove it)

Upvotes: 3

Related Questions