Question

I can’t really get why the following selector works as expected (i.e. get the td):

table tr td

but this one doesn’t:

table > tr > td

The td is a descendant of tr, which in turn is a descendant of table, but they are also children of each other. Therefore, I thought that the > selector would work too.

I made two fiddles:

1. Child: http://jsfiddle.net/brLee/
2. Descendant: http://jsfiddle.net/brLee/1/

Why isn’t the > selector working here?

Answer 1

In HTML, browsers implicitly add a tbody element within which to contain the tr elements¹, so in reality, tr is never a child of table.

Consequently, you have to do this instead:

table > tbody > tr > td

Of course, if you add a tbody element yourself, you use the same selector. The spec explains when a tbody is added implicitly otherwise:

Tag omission

A tbody element’s start tag may be omitted if the first thing inside the tbody element is a tr element, and if the element is not immediately preceded by a tbody thead, or tfoot element whose end tag has been omitted.

---

¹ _{This is not the case for XHTML documents that are properly served as application/xhtml+xml, however, given its XML roots.}