1

I'm just wondering why child selector doesn't work between .nav1 and tr:last-child but when I use .nav1 tr:last-child it works, isn't child selector considered a descendant selector so it should work for both codes or does :last-child need a special treatment.

Here's the code: 

.nav1 td {
  background-color: #5d93ea;
  padding: 30px 60px;
  border-radius: 20px;
}


/*it works when using:  .nav1 > tr:last-child > td   */

.nav1>tr:last-child>td {
  border-radius: 20px 20px 0px 0px;
}

a {
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
  font-size: 1.2em;
  color: black;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<table cellspacing="10px" class="nav1">
  <tr>
    <td><a href="#">1</a></td>
    <td><a href="#">2</a></td>
    <td><a href="#">3</a></td>
    <td><a href="#">4</a></td>
  </tr>
  <tr>
    <td><a href="#">1</a></td>
    <td><a href="#">2</a></td>
    <td><a href="#">3</a></td>
    <td><a href="#">4</a></td>
  </tr>
</table>
j08691
  • 204,283
  • 31
  • 260
  • 272
Salah Eddine
  • 155
  • 2
  • 12
  • `` should not be a direct descendant of `` and (some?) browsers fix this by implicitly wrapping the rows with a ``.
     – pawel Nov 16 '17 at 21:48
  • 2
    @pawel That's wrong. There's nothing at all wrong with a `` being a child of a ``
     – j08691 Nov 16 '17 at 21:50
  • @JonathanNicol Not sure who found your comment useful. Check my answer for difference between the both. – Praveen Kumar Purushothaman Nov 16 '17 at 21:51
  • @j08691 then file a bug report to the browser vendors who have decided they will wrap the rows with a tbody. – pawel Nov 16 '17 at 21:51
  • @j08691 But the browsers treat it this way. Most of them. Google Chrome does it. – Praveen Kumar Purushothaman Nov 16 '17 at 21:54
  • @PraveenKumar Browsers may add the tag to be assistive, but there's nothing *invalid* about the HTML when not using it. Obviously though the browsers adding it on their own can causes issues, like the one in this question. – j08691 Nov 16 '17 at 21:55
  • @j08691 It's not invalid. No one said it so. (Did someone?) The problem is with the descendant selector and the implicit addition of tags. – Praveen Kumar Purushothaman Nov 16 '17 at 21:56
  • @PraveenKumar pawel essentially said it, yes (` should not be a direct descendant of `).
     – j08691 Nov 16 '17 at 21:58
  • @j08691 from the HTML5 spec on parsing contents of a table element, when "_A start tag whose tag name is one of: "td", "th", "tr": Act as if a start tag token with the tag name "tbody" had been seen, then reprocess the current token._" https://www.w3.org/TR/2011/WD-html5-20110525/tree-construction.html#parsing-main-intable – pawel Nov 16 '17 at 21:58
  • @j08691 Gotcha... But see the above comment. – Praveen Kumar Purushothaman Nov 16 '17 at 21:58
  • @pawel I'm not sure what your point is with quoting that blurb from a six year old document – j08691 Nov 16 '17 at 21:59
  • My point is that this blurb has been implemented by browser vendors in a way that makes a table without tbody automagically get the tbody. The point that it is six years old is irrelevant unless it has been revoked - then again, please go file bug reports, but for the time being this is how the browsers work. – pawel Nov 16 '17 at 22:04
  • @j08691 so here's a blurb from a [document](https://html.spec.whatwg.org/#element-restrictions) "_Last updated 16th November 2017_" - is it recent enough? "_A table element must not contain tr elements, even though these elements are technically allowed inside table elements according to the content models described in this specification. (If a tr element is put inside a table in the markup, it will in fact imply a tbody start tag before it.)_" – pawel Nov 16 '17 at 22:09
  • 1
    @pawel. That's not j08691's point. What is valid HTML, and how browser;s process HTML are two totally separate things in the HTML spec. j08691's point is that tr elements as children of table elements is completely valid. What you are quoting is from a section describing how browser parsers process HTML in the `text/html` syntax. Browsers can also parse HTML in the `application/xhtml+xml` syntax. There, tbody elements won't be automatically added, the tr will be a child of the table, and that is completely valid. Valid child tr's of table's can also be constructed in JavaScript. – Alohci Nov 16 '17 at 23:25
  • Possible duplicate of [Why doesn't table > tr > td work when using the child selector?](https://stackoverflow.com/questions/5568859/why-doesnt-table-tr-td-work-when-using-the-child-selector) – Kevin B Nov 17 '17 at 19:17

1 Answers1

4

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 >:

With > tbody >:

Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252