41

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?

BoltClock
  • 630,065
  • 150
  • 1,295
  • 1,284
pimvdb
  • 141,012
  • 68
  • 291
  • 345

2 Answers2

86

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.

BoltClock
  • 630,065
  • 150
  • 1,295
  • 1,284
  • 1
    I wasn't aware of that at all. Your solution works just great. – pimvdb Apr 06 '11 at 15:26
  • @pimvdb: Not many people are - most just learn about `table`, `tr` and `td` when they start out. I didn't know about `tbody` myself until a couple of years ago (considering I first picked up HTML from Neopets...). – BoltClock Apr 06 '11 at 15:56
  • 1
    Note that is optional in XHTML, and will *not* be added to the DOM (ref:http://javascript.about.com/od/hintsandtips/a/htmldom.htm). Safest option is to just use `table tr` in selectors. – Mark Thomas Nov 07 '11 at 13:17
  • @Mark Thomas: Good to know. Is it cross-browser? This fiddle with a doctype of XHTML 1.0 Strict does add a `tbody` element in Chrome: http://jsfiddle.net/9uL8s/. – pimvdb Nov 12 '11 at 11:22
  • @pimvdb Yes, it's cross-browser and safer. `table tr` allows for a `` inbetween, but `table > tr` does not. – Mark Thomas Nov 13 '11 at 14:47
  • Note also that browsers still add `tbody` elements even when parsing and rendering as HTML5. See [this question](http://stackoverflow.com/questions/7490364/why-do-browsers-still-inject-tbody-in-html5). – BoltClock Mar 23 '12 at 21:15
  • @pimvdb: I'm late, but jsFiddle doesn't serve documents with XHTML doctypes as `application/xhtml+xml`, so it'll still be treated as HTML tag soup, hence the addition of `tbody`. – BoltClock Mar 23 '12 at 21:19
  • 1
    @MarkThomas - `table tr` without the child selector may be the safest option, but it will cause problems if you have nested tables. (not that I'm recommending nested tables! -shudder-) – Spudley May 07 '12 at 05:16
  • @BoltClock does this automatic `tbody` addition applies also to `thead` and `tfoot`? – Ozichukwu Aug 04 '19 at 12:55
  • @Ozichukwu: No, because not every table has a thead and/or a tfoot, and browsers can't make assumptions as to whether the author meant to use them. – BoltClock Sep 01 '19 at 18:51
2

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;
        border-style:none;
    }

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!

Sergiu
  • 314
  • 5
  • 17