Descendant selector usage

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.

It should, actually, assuming `...` are all made of non-table elements. Are there any other `.outer tr`s or inner `table`s that occur in your code? Where are they located? — BoltClock, Jun 17 '11 at 17:27
You should add a complete sample of your HTML. A [jsFiddle](http://jsfiddle.net/) showing your selector not working would be useful. — thirtydot, Jun 17 '11 at 17:30
Be careful with pseudo classes such as `:first-child`, they are not supported in every browser. Of course, it won't work in the anti-browser unless it's version 7 or newer, with some bugs on versions 7 and 8. 9 however seems to work correctly. Take a look at [this QuirksMode article](http://www.quirksmode.org/css/contents.html) for a list of supported browsers and versions. If the browser doesn't support it though, it won't show at all, so this is not a solution, just a warning. — rid, Jun 17 '11 at 17:39
I'm testing in Firefox and Chrome (latest versions) and both give the same results. Not too worried about IE6. There are no other .out tr elements, just the one tr. In the second td there are other table elements that are being affected by the selector. I'll see if I can post a more complete code example. — Jeremy Hicks, Jun 17 '11 at 18:51

BoltClock · Accepted Answer · 2011-06-17T17:32:47.523

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

edited Jun 17 '11 at 17:32

answered Jun 17 '11 at 17:27

BoltClock

700,868
160
1,392
1,356

There are indeed other table elements inside the second and some of them are being affected by the selector. I don't have tbody in my code, does that matter? Either way, I tried it with and without the tbody in the selector and both fail to affect anything now. – Jeremy Hicks Jun 17 '11 at 18:47
@Jeremy Hicks: `table.outer tr` may match `tr`s inside any other tables inside `table.outer`. By adding `> tbody >` you anchor the `tr` to its parent `tbody` of the outer `table` **only**. And as explained [here](http://stackoverflow.com/questions/5568859/why-doesnt-table-tr-td-work/5568877#5568877), `tbody` is added implicitly even if you don't mark it up. That said, as thirtydot suggests it would be good if you could post the full code either here or on a http://jsfiddle.net demo, so we can take a closer look. – BoltClock Jun 17 '11 at 18:54
EDIT: Never mind! Adding the tbody made it work! Thanks so much. I figured since I didn't explicitly have tbody there that it wasn't required. – Jeremy Hicks Jun 17 '11 at 18:57

score 0 · Answer 2 · answered Jun 17 '11 at 17:30

0

You should note that this is also the first <tr> you want to target.

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

answered Jun 17 '11 at 17:30

MatTheCat

18,071
6
54
69

There is only one tr in table.outer so I just left that off. – Jeremy Hicks Jun 17 '11 at 18:47

Descendant selector usage

2 Answers2