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 { 
  开发者_如何学JAVA 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>?

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/

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

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

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

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

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 */}