css selectors - Apply CSS Style to child elements


Translate

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?


All Answers
  • Translate

    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;
    }
    

  • Translate
    .test * {padding: 40px 100px 40px 50px;}
    

  • Translate

    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>


  • Translate

    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


  • Translate

    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>

  • Translate
    div.test td, div.test caption, div.test th 
    

    works for me.

    The child selector > does not work in IE6.


  • Translate

    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).