Tutorial :Apply CSS Style to child elements



Question:

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?


Solution:1

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


Solution:2

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


Solution:3

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>


Solution:4

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


Solution:5

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>


Solution:6

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

works for me.

The child selector > does not work in IE6.


Solution:7

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


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »