307

I want to apply styles only to the table inside the DIV with a particular class:

Note: I'd rather use a css-selector for children elements.

Why does the #1 works and #2 doesn't?

1:

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

2:

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

HTML: 

<html>
    <head>
        <style>
            div.test > th, td, caption {padding:40px 100px 40px 50px;}
        </style>
    </head>
    <body>
        <div>
            <table border="2">
                <tr><td>some</td></tr>
                <tr><td>data</td></tr>
                <tr><td>here</td></tr>
            </table>
        </div>
        <div class="test">
            <table  border="2">
                <tr><td>some</td></tr>
                <tr><td>data</td></tr>
                <tr><td>here</td></tr>
            </table>
        </div>
    </body>
</html>

What am I doing wrong?

YakovL
  • 7,557
  • 12
  • 62
  • 102
roman m
  • 26,012
  • 31
  • 101
  • 133

8 Answers8

384

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
  • 28,693
  • 6
  • 56
  • 68
  • 1
    is there any way around writing div.test 3 times over? – roman m Mar 10 '09 at 20:30
  • 2
    @rm Nope. There's no nesting of rules or 'with' type grouping – sblundy Mar 10 '09 at 20:31
  • 4
    @romanm There is way around writing 'div.test' 3 times over! look into using sass or less frameworks for writing css files! :) – gillyb Jul 24 '14 at 11:10
  • @romanm - see my answer, using a * to target all children to prevent repeating, or using .class > * for all direct children. Its not hard. – Richard Edwards Sep 23 '15 at 12:35
  • The hint about not being supported in IE was very helpful, I was trying to make some CSS work for DTCoreText on iOS but it wasn't working, their parser is worse than IE. – Allison Nov 24 '17 at 21:43
153
.test * {padding: 40px 100px 40px 50px;}
Richard Edwards
  • 2,000
  • 1
  • 12
  • 19
  • 22
    Note that, * here means that you cannot override it with any other more specific rule because `.test *` would be the most specific rule for every child element. In other words, keep in mind that whatever you put inside `.test *` cannot be overridden by any more specific css rule because `test *` is the most specific rule. – vadasambar Jul 04 '17 at 14:50
101

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
  • 316,276
  • 54
  • 369
  • 333
  • 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 Mar 10 '09 at 20:36
  • @annakata: that's a part of css framework, i'm trying to apply it locally – roman m Mar 10 '09 at 20:38
13

If you want to add style in all child and no specification for html tag then use it.

Parent tag div.parent

child tag inside the div.parent like <a>, <input>, <label> etc.

code : div.parent * {color: #045123!important;}

You can also remove important, its not required

Szymon Toda
  • 4,454
  • 11
  • 43
  • 62
user1369111
  • 135
  • 1
  • 4
10

This code can do the trick as well, using the SCSS syntax

.parent {
  & > * {
    margin-right: 15px;
    &:last-child {
      margin-right: 0;
    }
  }
}
Cray
  • 2,774
  • 7
  • 22
  • 32
greguintow
  • 119
  • 1
  • 5
8

Here is some code that I recently wrote. I think that it provides a basic explanation of combining class/ID names with pseudoclasses.

.content {
  width: 800px;
  border: 1px solid black;
  border-radius: 10px;
  box-shadow: 0 0 5px 2px grey;
  margin: 30px auto 20px auto;
  /*height:200px;*/

}
p.red {
  color: red;
}
p.blue {
  color: blue;
}
p#orange {
  color: orange;
}
p#green {
  color: green;
}
<!DOCTYPE html>
<html>

<head>
  <title>Class practice</title>
  <link href="wrench_favicon.ico" rel="icon" type="image/x-icon" />
</head>

<body>
  <div class="content">
    <p id="orange">orange</p>
    <p id="green">green</p>
    <p class="red">red</p>
    <p class="blue">blue</p>
  </div>
</body>

</html>
jdgregson
  • 1,457
  • 17
  • 39
Mark
  • 91
  • 1
  • 1
  • 1
    CSS doesn't allow single line comments such as `//`. See https://stackoverflow.com/questions/4656546/why-dont-we-have-a-comment-in-css – Volker E. Oct 12 '15 at 20:35
6
div.test td, div.test caption, div.test th

works for me.

The child selector > does not work in IE6.

Traingamer
  • 1,438
  • 8
  • 9
4

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
  • 23,338
  • 31
  • 90
  • 128