Apply Css Style to Child Elements
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...
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?
8 Answers
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;
}
.test * {padding: 40px 100px 40px 50px;}
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>
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
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>div.test td, div.test caption, div.test th
works for me.
The child selector > does not work in IE6.
This code can do the trick as well, using the SCSS syntax
.parent {
& > * {
margin-right: 15px;
&:last-child {
margin-right: 0;
}
}
}
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).
James Sterling reports on renewable energy developments, climate policy, ecological conservation, and green tech innovations around the globe.
