10

I am trying to do something very simple - select the tags which are direct descendants of a tag.

The CSS I am using is as follows:

table.data > tr { background-color: red; }

My HTML looks like this:

<table class="data">
    <tr>
        ...
    </tr>
</table>

But no red background is forthcoming! If I remove the ">" character from the CSS, it works! I have tried this in Firefox, IE 8, Chrome and Safari, and all the browsers do exactly the same thing.

Hopefully someone can help me after so many frustrating hours! I know I am doing something extremely stupid, but I can't figure out what it is.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Flyingkiwi
  • 3,066
  • 3
  • 15
  • 17
  • possible duplicate of [Why doesn't table > tr > td work?](http://stackoverflow.com/questions/5568859/why-doesnt-table-tr-td-work) – BoltClock Sep 22 '11 at 07:15
  • 1
    maybe you don't need the > since tr is contingent on a table tag and a natural direct descendant of table syntax...?
    text
     – Chris22 Sep 23 '11 at 20:45
  • @Chris22 This only works if there are no nested tables inside. – Mr Lister Feb 20 '17 at 08:44

1 Answers1

25

Most1 browsers automatically insert a tbody element into a table, so the css should be:

table.data > tbody > tr { background-color: red; }

to account for that.

1 I think that all browsers do this, but I don't have the capacity, or time, to check that assumption. If you're concerned that there might be some users with a browser that doesn't do this, you could offer both selectors in the css:

table.data > tr,
table.data > tbody > tr { background-color: red; }
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
David Thomas
  • 249,100
  • 51
  • 377
  • 410
  • @Jon Heh. I was thinking the same thing... :p – Tieson T. Sep 22 '11 at 07:09
  • I was in the middle of a TF2 game when this popped up, so my close vote probably came too late. But your answer is pretty much correct anyway, so have an upvote! – BoltClock Sep 22 '11 at 07:21
  • @BoltClock: why. thank you kindly! :) Clearly I used the wrong search terms (which given the question is difficult in itself) when I looked for the duplicate(s). Oops... – David Thomas Sep 22 '11 at 07:22
  • Thanks for the answer. I tried this, but it doesn't work either. I looked at the HTML code from the browser (of course), and there is no tag. Man, this is weird... – Flyingkiwi Sep 22 '11 at 07:39
  • @Flyingkiwi: 'view source' or from, for example, Firebug or Web Inspector? Could you post your table, and CSS, to [JS Fiddle](http://jsfiddle.net/)? – David Thomas Sep 22 '11 at 07:41
  • I am viewing the source directly from Firefox, not Firebug. I understand that Firebug and Firefox can differ. I will try writing a completely new, simple HTML page to isolate this issue. Perhaps something else is interfering. – Flyingkiwi Sep 22 '11 at 07:48
  • 1
    Browsers add the `` to the DOM, not the HTML source. This is why you see that the HTML source is not modified at all - it really isn't. – BoltClock Sep 22 '11 at 08:04
  • OK. So I isolated the problem in a test file and it works perfectly. I don't know why my real code works now, but I can confirm that the tbody is definitely inserted (but not displayed in the source!), and is required in the HTML. – Flyingkiwi Sep 22 '11 at 08:04
  • @DavidThomas WRT your assertion that the `tbody` may not _always_ be inserted auytomatically: you're right. If the file is XHTML, the browser doesn't insert a tbody. XML parsers don't do that kind of thing. So the proposed solution is good: it targets both HTML and XHTML files. – Mr Lister Feb 20 '17 at 08:43