Why Doesn't Table ≫ Tr ≫ Td Work When Using the Child Selector

Why doesn't table tr td work when using the child selector?

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.}

Why child selector doesn't work?

Google Chrome and other browsers that follow standards add a <tbody> tag:

tbody

You can see them in the Dev Tools. So you might need to use:

.nav1 > tbody > tr:last-child > td {

Preview

Without > tbody >:

Sample Image

With > tbody >:

Sample Image

Why isn't first-child pseudo-class working on table-row (tr) elements when the first one is inside a div?

the selector :first-child looks for the first element in a parent like you've said, in this case tr. For example if I want the first paragraphs to have background-color: yellow.

p:first-child {
  background-color: yellow;
}

<div>
<p>This paragraph is the first child inside of a div.</p>
</div>

<p>This paragraph is the second child.</p>
<p>This paragraph is the third child.</p>

CSS child selector: can't select rows direct children of table, excluding children of sub-table

a tbody element may be automatically inserted when it is not in the markup (the side effect is that a table > tr selector could fail), so try to change last rule with body > table > tbody tr.

example: http://jsfiddle.net/wn84hotm/2/

Why doesn't my direct descendant selector work?

First, finish defining the table correctly:

<table>
  <thead>
    <tr> TITLE ROW HERE </tr>
  </thead>
  <tbody>
    CONTENT ROWS HERE
  </tbody>
</table>

Then your CSS selector becomes:

.myDiv>table>thead>tr>td {
    ...
}

using nth-child in tables tr td

table tr td:nth-child(2) {
    background: #ccc;
}

Working example: http://jsfiddle.net/gqr3J/

CSS Selector is not working

table.tab > tbody > tr indeed gives the style to only the first row.
If you take a look at the DOM with firebug, you can confirm it. The first row of the child table doesn't get styled the same way.

However, since your child table is inside a table row that has a red background, and the child table has no background specified, the child table will have no background - and thus you still see the red background "through" the child table.

Possible solution - styling the child table as well with a different background:

table.tab > tbody >  tr {
 background:red;
}

table.tab table > tbody > tr{
 background:white;
}

Why does $('#table tr') selector not match? (always return 0)

Because the direct children of a <table> can only be <thead>, <tbody>, or <tfoot> (or <colgroup> or <caption>, but those don't contain rows).

The browser's DOM will implicitly wrap stray <tr>s in a <tbody>. (for browsers that don't do this, jQuery fakes it instead)

You need to write $('#table > tbody > tr').

CSS Child selector not working as expected

I suspect you need to change table.index > tbody > tr:last-child td:first-child into table.index > tbody > tr:last-child > td:first-child (putting the direct descendant selector between tr > td), and the same for the td:last-child selector that directly follows.

Why Doesn't Table ≫ Tr ≫ Td Work When Using the Child Selector