Home » Html » Why doesn't table > tr > td work when using the child selector?

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

Posted by: admin November 29, 2017 Leave a comment


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?


In HTML, browsers implicitly add a tbody element within which to contain the tr elements1, 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.

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


If you want to be more catholic than the pope 🙂 here is what I did (because none of the above worked for me):

1) Create a css class, assign it to the property of the GridView (eg:

<PagerStyle CssClass="pagerNoBorder" /> 


2) Define you css class just as the page numbers are rendered by your browser (inspect the element in the browser and look for all the child selectors!). In my case, this was the situation:

.pagerNoBorder > td > table > tbody > tr > td
        border-width:0px !important;

If you’re going to say why border-width (+ !important) and border-style in the same time then read again the intro of my answer 🙂 . Cheers and good day!