ansaurus

Question

Answer 1

+13 A:

This code "div.test th, td, caption {padding:40px 100px 40px 50px;}" applies a rule to all th elements which are contained by a div element with a class named test, in addition to all td elements and all caption elements.

It is not the same as "all td, th and caption elements which are contained by a div element with a class of test". To accomplish that you need to change your selectors:

'>' isn't fully supported by some older browsers (I'm looking at you, Internet Explorer).

div.test th,
div.test td,
div.test caption {
    padding: 40px 100px 40px 50px;
}

Ken Browning 2009-03-10 20:21:27

is there any way around writing div.test 3 times over?

roman m 2009-03-10 20:30:22

@rm Nope. There's no nesting of rules or 'with' type grouping

sblundy 2009-03-10 20:31:51

thanx for clarification

roman m 2009-03-10 20:35:38

Answer 2

A:

As far as I know this:

div[class=yourclass] table {  your style here; }

or in your case even this:

div.yourclass table { your style here; }

(but this will work for elements with yourclass that might not be divs) will affect only tables inside yourclass. And, as Ken says, the > is not supported everywhere (and div[class=yourclass] too, so use the point notation for classes).

tunnuz 2009-03-10 20:22:08

Answer 3

+6 A:

The > selector matches direct children only, not descendants.

You want

div.test th, td, caption {}

or more likely

div.test th, div.test td, div.test caption {}

Edit:

The first one says

  div.test th, /* any <th> underneath a <div class="test"> */
  td,          /* or any <td> anywhere at all */
  caption      /* or any <caption> */

Whereas the second says

  div.test th,     /* any <th> underneath a <div class="test"> */
  div.test td,     /* or any <td> underneath a <div class="test"> */
  div.test caption /* or any <caption> underneath a <div class="test">  */

In your original the div.test > th says any <th> which is a **direct** child of <div class="test">, which means it will match <div class="test"><th>this</th></div> but won't match <div class="test"><table><th>this</th></table></div>

Greg 2009-03-10 20:22:54

waaaaay morelikely #2 methinks

annakata 2009-03-10 20:24:01

I think you should expand this answer to explain why #1 probably isn't what he intends.

SpoonMeiser 2009-03-10 20:27:06

yes, please explain why #1 doesn't work

roman m 2009-03-10 20:28:36

@Ken: beat you, thank you for the answer

roman m 2009-03-10 20:36:15

fwiw, because the td and caption in that selector are "dumb" - they'll match any given th/caption without regard for div.test. That kind of blind targetting is rarely what you want in CSS for anything but the most general styles.

annakata 2009-03-10 20:36:18

@annakata: that's a part of css framework, i'm trying to apply it locally

roman m 2009-03-10 20:38:51

Answer 4

+1 A:

Don't forget that the >, + and [ ] selectors are unavailable for IE6 and under.

Erick 2009-03-10 20:23:29

Answer 5

+1 A:

div.test td, div.test caption, div.test th

works for me.

The child selector > does not work in IE6.

Traingamer 2009-03-10 20:32:18

And (while I'm looking that up) you got lots of the same answer :-)

Traingamer 2009-03-10 20:33:40

ansaurus

tags:

views:

answers:

Apply CSS Style to child elements

related questions