0

I have the following table

    <table>
        <tr>
            <td>1st</td>
            <td>Anne Wright &amp; Steve Wright</td>
            <td>510 VPs</td>
        </tr>
        <tr>
            <td>2nd</td>
            <td>Ian Bruce &amp; Lyn Hilton</td>
            <td>472 VPs</td>
        </tr>
        <tr>
            <td>3rd</td>
            <td>Anne Morris &amp; Lucy Pathan</td>
            <td>469 VPs</td>
        </tr>
        <tr>
            <td>4th</td>
            <td>Mike Ayers &amp; Mike Gould</td>
            <td>426 VPs</td>
        </tr>
        <tr>
            <td>5th</td>
            <td>Alison Nichols &amp; Simon Stokes</td>
            <td>409 VPs</td>
        </tr>
        <tr>
            <td>6th</td>
            <td>Brian Stockdale &amp; Sheila Stockdale</td>
            <td>406 VPs</td>
        </tr>
        <tr class="relegated">
            <td>7th</td>
            <td>Pauline Dignan &amp; Val Rees</td>
            <td>349 VPs</td>
        </tr>
        <tr class="relegated">
            <td>8th</td>
            <td>Alan Lord &amp; John Thompson</td>
            <td>319 VPs</td>
        </tr>
    </table>

I want to put a red border above the row that has the class "relegated".

I know that I need to apply the border on the child <td> tags and not the <tr>

I have tried

        .relegated:nth-child(1) td {
            border-top: 1px dashed red;
        }

but I get nothing. Doing

        tr:nth-child(7) td {
            border-top: 1px dashed red;
        }

does work. But I want to target it based on the class (because this is a league table and you can't get relegated from the bottom division).

Steve Wright
  • 534
  • 1
  • 4
  • 14
  • Does this answer your question? [Add border-bottom to table row ](https://stackoverflow.com/questions/10040842/add-border-bottom-to-table-row-tr) – InSync Jun 08 '23 at 23:45
  • I'd already looked at that and came to the conclusion that the border needed to be added to the children and NOT the itself. My problem is how to target the correct – Steve Wright Jun 09 '23 at 11:45
  • The tr:nth-child(1 of .relegated) suggested by 2ju2 (see below) solves the problem of how to target the correct – Steve Wright Jun 09 '23 at 11:56

1 Answers1

1

use that. :nth-child(1 of className)

tr:nth-child(1 of .relegated) td{
  border-top: 1px dashed red;
}
<table id="table">
  <tbody>
      <tr>
            <td>1st</td>
            <td>Anne Wright &amp; Steve Wright</td>
            <td>510 VPs</td>
        </tr>
        <tr>
            <td>2nd</td>
            <td>Ian Bruce &amp; Lyn Hilton</td>
            <td>472 VPs</td>
        </tr>
        <tr>
            <td>3rd</td>
            <td>Anne Morris &amp; Lucy Pathan</td>
            <td>469 VPs</td>
        </tr>
        <tr>
            <td>4th</td>
            <td>Mike Ayers &amp; Mike Gould</td>
            <td>426 VPs</td>
        </tr>
        <tr>
            <td>5th</td>
            <td>Alison Nichols &amp; Simon Stokes</td>
            <td>409 VPs</td>
        </tr>
        <tr>
            <td>6th</td>
            <td>Brian Stockdale &amp; Sheila Stockdale</td>
            <td>406 VPs</td>
        </tr>
        <tr class="relegated">
            <td>7th</td>
            <td>Pauline Dignan &amp; Val Rees</td>
            <td>349 VPs</td>
        </tr>
        <tr class="relegated">
            <td>8th</td>
            <td>Alan Lord &amp; John Thompson</td>
            <td>319 VPs</td>
        </tr>     
  </tbody>      
</table>
2ju2
  • 224
  • 1
  • 2
  • That works a treat. I never knew about the "of class" option. Interestingly, neither does my IDE (VS Code) as it is highlighting this as a syntax error. – Steve Wright Jun 09 '23 at 11:54