Home/ Questions/Q 142177
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T07:53:42+00:00

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

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

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