CODEWITHSUNDEEP
css
WoJ
WoJ

Reputation: 30074

How to apply properties of an attribute to a div-inherited class?

I have two table in two div, each div having a different class. I would like to apply a padding to the cells of one of the tables only.

(the code below is also at JSFiddle)

The HTML part: 

<div class=tight>
<table>
<tr>
  <td>hello</td><td>world</td>
</tr>
</table>
</div>

<div class=wide>
<table>
<tr>
  <td>bonjour</td><td>tout le monde</td>
</tr>
</table>
</div>

The CSS part:

td {
  background: green;
  color: white;
  padding: 10px;
}

This applies padding to all cells. I tried to be specific though various combinations of 

td .wide { ... }
td, .wide { ... }
td.wide { ... }

but I failed to find the right one.

Is it possible to set a property for an element, but which is a child of a specific div (specific = having a specific class)?

Upvotes: 1

Views: 27

Answers (2)

Shailesh
Shailesh

Reputation: 337

Use some thing like this .wide td

Upvotes: 1

KCarnaille
KCarnaille

Reputation: 1057

For example, if you want to apply padding on < td > of the first div, use:

.tight td{
  padding: 10px;
}

If you prefer to exclude one of the class, you can also use :

div:not(.tight) td {
  padding: 10px;
}

Upvotes: 1

Related Questions