Menu
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?
268
The > is the child selector, which prevents the style from being applied to table rows further down the element tree. Show activity on this post. One solution would be to name your style table tr. style1{ ... and then in each of your <tr> 's you could just add a class attribute, i.e. <tr class="style1"> .
There is currently no way to select the parent of an element in CSS, at least not a way that works across all browsers.
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;} If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With