CODEWITHSUNDEEP
htmlcsscss-selectors
Lemex
Lemex

Reputation: 3794

Style All Children

Basically I have a dynamically created page like below:

<div id="content>
 DYNAMIC HERE
</div>

I have no control of what is in the div, but I know there will be a lot of tables that may be contained within other divs.

For example

<div id="content">
     <div >
           <div >
            TABLE HTML HERE
            </div>
      </div>
</div>

But I will never know how far down a table could be.

So I would ideally want to do something like:

#content table {
 style here
}

But this applies to all tables within that div even if they're nested many elements down.

How would I say for this div and everything within it style the tables?

Upvotes: 1

Views: 122

Answers (3)

Brett Weber
Brett Weber

Reputation: 1907

Your current syntax is for a Descendant Selector. Descendant selectors are similar to child selectors, but they do not require that the relationship between matched elements be strictly parent-child. Child Selectors use 

#content > table

so, the syntax you have is correct for applying a style to a nested table.

An exception to this (as stated here) is if you have a more specific selector.

Upvotes: 2

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

Using #content table should target all the tables within #content. However, if there is a table, for example #test which is styled from another stylesheet, the #test is more specific than #content table, so the other style will overrule yours.

You can overrule that style using !important in your stylesheet, you should use that on every line, so it's not the cleanest solution.

For example: 

#content table {
   color: green !important;
   background: red !important;
}

Upvotes: -1

GetSet
GetSet

Reputation: 532

Yes, the space syntax indicates that you want to select any descendants of the parent, so #content table is fine:

http://jsfiddle.net/XnnLG/

Upvotes: 3

Related Questions