CODEWITHSUNDEEP
htmlcsscss-selectors
Salah Eddine
Salah Eddine

Reputation: 155

Why child selector doesn't work?

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>

Upvotes: 1

Views: 158

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167240

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

Upvotes: 4

Related Questions