CODEWITHSUNDEEP
htmlcss
GC_
GC_

Reputation: 508

How to select a child of child without firstChild or nth-child()?

I have a table like this:

<div id="unique_id">
    <div></div>
    <div>
        <div>
            <div class="common_class">
                <table>
                </table>
            </div>
        </div>
    </div>
</div>

I would like to select the table in common_class, however, I am picking up other stuff. I would like something like:

#unique_id > .common_class > table

However, that does not work. For that to work div.common_class would have to be the child of div#unique_id.

Note: I must support IE7, so no nth-child() selector. Also, I am trying to avoid javascript. Note: firstChild is allowed, but I am looking for second div at one point.

GC

Upvotes: 1

Views: 56

Answers (1)

Dekel
Dekel

Reputation: 62556

#unique_id > .common_class requires the .common_class to be a direct child of #unique_id (and this is not your case).

Just avoid the > there:

#unique_id .common_class > table {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}
<div id="unique_id">
    <div></div>
    <div>
        <div>
            <div class="common_class">
                <table>
                </table>
            </div>
        </div>
    </div>
</div>

Or use the exact tree: #unique_id > div > div > .common_class > table (but you really shouldn't use this kind of css).

Upvotes: 5

Related Questions