CODEWITHSUNDEEP
htmlcssinheritance
Matt
Matt

Reputation: 1812

Can HTML tags inherit the class of a parent/enclosing tag?

Is there a way to specifically style only the tags inside a wrapping tag? For example, I want to style only <td> within tables of class "wide".

HTML:

<table class="wide">
<tr>
<td>Entry 1</td>
<td>Entry 2</td>
</tr>
<tr>
...
</tr>
</table>

CSS (or something along these lines):

td.wide {
    /* styling */
}

I want to have all the <td> elements for "wide" tables styled but a table like <table class="small"> ... </table> would not have its <td> elements styled. I would like to avoid adding class="wide" to every <td> element in all the wide tables.

Note: I'm not looking to do this specifically for <table> and <td> elements. I'd like to know the proper way to do this in general. The example could be styling all <p> elements enclosed in a <div> of a certain class.

Upvotes: 8

Views: 13260

Answers (4)

Paulie_D
Paulie_D

Reputation: 115099

This is basic CSS.

Your table has a class of .wide and you want to style the td elements within it.

.wide td {
yourstyles;
}

Upvotes: 4

Daniel A. White
Daniel A. White

Reputation: 190943

No, thats not how css works

You could do this

table.wide td {
}

Upvotes: 2

Brian Ray
Brian Ray

Reputation: 1492

With your HTML layout, this is very easy.

table.wide td {

}

Upvotes: 2

Quentin
Quentin

Reputation: 943586

Can HTML tags inherit the class of a parent/enclosing tag?

No. Classes are not inherited.

Is there a way to specifically style only the tags inside a wrapping tag?

A descendant combinator

selector-of-container [space] selector-of-target-within-container

I would like to avoid adding class="wide" to every <td> element in all the wide tables.

table.wide td { /* rules */ }

Upvotes: 16

Related Questions