CODEWITHSUNDEEP
css
Osman
Osman

Reputation: 1

I can't understand this type of css usage

It's odd but I can't understand the following css usage.

.containertable table
{
    ...
}

I know table.containertable which means class="containertable"

Upvotes: 0

Views: 86

Answers (4)

Alex Lyalka
Alex Lyalka

Reputation: 1641

This mean: all tables that has direct or indirect parent element of any type with class="containertable"

https://www.w3schools.com/cssref/sel_element_element.asp

It can be:

<div class="containertable">
 <table> </table>
</div>

or:

<div class="containertable">
 <h3> </h3>
 <table> </table>
</div>

or:

<div class="containertable">
  <div class="someclass">
     <table> </table>
  <div>
</div>

but not:

<table class="containertable">
</table>

or:

<table>
 <tr class="containertable"> </tr>
</table>

Upvotes: 0

bsechrist
bsechrist

Reputation: 21

It will select all table elements which are inside an element with the class containertable

Also see: CSS selectors Selecting an element only when inside another element

Upvotes: 2

Gerard
Gerard

Reputation: 15786

.containertable table { ... } addresses:

<div class='containertable'>
  <table></table>
</div>

Upvotes: 0

Albzi
Albzi

Reputation: 15609

It means this:

<div class='containertable'>
    <table> <!-- This table here or any other table under '.containertable' -->
        ....

Any table within the class .containertable will be effected by the CSS rules you put in .containertable table {.

It does not mean it is a direct descendant, just that any table element within containertable is effected.

This also includes:

<div class='containertable'>
    <div class='anotherClass'>
        <table> <!-- this is also effected by the CSS -->

Upvotes: 4

Related Questions