Solution 1 :

You already have thead and tbody as separate references, so there’s no need for special expressions. I’m not sure what exactly you are trying to achieve, but this should give you all the options you are looking for.

/* The header */
.revista thead {
    font-size: 2.0em;
    color: red;
}

/* The first row */
.revista tbody tr:first-child {
    font-size: 2.0em;
    color: green;
}

/* All (other) rows */
.revista tbody tr {
    font-size: 1.2em;
    color: blue;
}
<table class="revista">
  <thead>
    <tr>
      <td>MY LINK</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>SUMMER 2020</td>
    </tr>
    <tr>
      <td>SUMMER 2021</td>
    </tr>
    <tr>
      <td>SUMMER 2022</td>
    </tr>
  </tbody>
</table>

Problem :

I have a table like this:

<table class="revista">
  <thead>
    <tr>
      <td><a href="http://example.com">MY LINK</a></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>SUMMER 2020</td>
    </tr>
  </tbody>
</table>

I want to style both the header and the first row after it, independently, so I have this:

.revista thead {
    font-size: 2.0em;
}

.revista tr:not(thead) td {
    font-size: 1.2em;
}

for the second one I have tried:

.revista tr:not(first-child) td {
    font-size: 1.2em;
}

and

.revista tr:not(nth-child(1)) td {
    font-size: 1.2em;
}

None works, I mean the second one changes the first too.

Comments

Comment posted by Duck

BRILLIANT! Sometimes the correct answer is the most obvious but my brain cannot see… I guess I need some vacations counting sheep in the country side! THANKS

By

Leave a Reply

Your email address will not be published. Required fields are marked *