CODEWITHSUNDEEP
htmlcsscss-selectors
Sandra Schlichting
Sandra Schlichting

Reputation: 25986

Why doesn't this style inherit?

If I have this html

<table class="actList">
    <tr>
        <th> a </th> <th> a </th> 
    </tr>
    <tr>
        <td> a </td> <td> a </td> 
    </tr>
</table>

and this css

.actList { 
   background-color: rgb(235, 239, 249); 
   width: 100%;
}

th.activity, th.actList { 
   text-align: left; 
   font-weight: normal; 
   padding: 0.4em 1em 0.4em 0.3em; 
}

Then I would expect that the last line means, that all <th>'s in the table with class="actList" would get this style. But it doesn't as seen here

http://jsfiddle.net/littlesandra88/k3Bv5/

What would the proper CSS for th.actList look like?

Can it be done without adding a class to each <th>?

Upvotes: 2

Views: 3016

Answers (6)

Jamie Dixon
Jamie Dixon

Reputation: 53991

Currently none of your th tags have the .actList class applied to them.

If you want to target th's inside a table with class .actList then you can simply do:

.actList th{ /* styles */}

Upvotes: 1

Quentin
Quentin

Reputation: 943185

th.actList means "A th that is a member of actList"

You want: "A th that is a descendent of a member of actList"

.actList th

Upvotes: 2

stealthyninja
stealthyninja

Reputation: 10371

You're declaring .actList on <table>, so your CSS should be table.actList th

Upvotes: 2

Aziz Shaikh
Aziz Shaikh

Reputation: 16524

Change: th.activity, th.actList { text-align: left; font-weight: normal; padding: 0.4em 1em 0.4em 0.3em; }

To: th.activity, .actList th { text-align: left; font-weight: normal; padding: 0.4em 1em 0.4em 0.3em; }

th.actList means that this rule will apply to th elements that have class="actList". You want to apply rule to th elements inside "actList" class, so for that you need .actList th

Upvotes: 1

mylesagray
mylesagray

Reputation: 8869

I would imagine you are trying to target ths within the .actlist in which case you need: .actlist th as your CSS selector, see fiddle below:

Example

Upvotes: 3

BonyT
BonyT

Reputation: 10940

th.actList means any th elements with the class of actList.

In your example only the table element has this class. Classes don't inherit!

what I suspect you are after is

.actlist th {...}

Fiddle updated: http://jsfiddle.net/k3Bv5/3/

Upvotes: 5

Related Questions