Question

I have a block of html code that I don’t have control over. I do, however, have access to alter the stylesheet. I need to add some style to the first nested table. Here is the html:

<table class="outer">
    <tr>
        <td>
            <table>
                    .
                    .
                    .
            </table>
        </td>
        <td>
        .
        .
        .
        </td>
    </tr>
</table>

I want to style the first nested table. I thought that this would be the correct selector to do so but it doesn’t seem to be working:

table.outer tr > td:first-child > table

It seems to want to style all tables and not just those inside the first td.

Answer 1

Instead of assuming your ... are made of non-table elements as per my comment, I’ll assume that they are other table elements.

Here then is a very specific selector you could try (adds more :first-child pseudo-classes and more > combinators):

table.outer > tbody > tr:first-child > td:first-child > table:first-child