Since the table inside the q4 div is the only one we can target it quite simply

.q4 table tbody tr:nth-child(your number here) td {
   border-bottom: 1px solid black;
}

td {
  padding:.25em;
}

.q4 table tbody tr:nth-child(3) td {
   border-bottom: 1px solid black;
}

<div class="mobile-league-table q4">
  <div class="sportspress">
    <div class"sp-template sp-template-league-table">
    <h4 class="sp-table-caption">UAE Division 1</h4>
    <div class="sp-table-wrapper">
      <div class="sp-scrollable-table-wrapper">
        <table
          class="sp-league-table sp-data-table sp-scrollable-table"
          data-sp-rows="10"
        >
          <thead>
            <tr>
              <th class="data-rank">Pos</th>
              <th class="data-name">Team</th>
              <th class="data-p">P</th>
              <th class="data-w">W</th>
              <th class="data-l">L</th>
              <th class="data-d">D</th>
              <th class="data-pf">PF</th>
              <th class="data-pa">PA</th>
              <th class="data-pd">PD</th>
              <th class="data-bp">BP</th>
              <th class="data-pts">Pts</th>
              <th class="data-form">Form</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Item 1</td>
              <td>Item 2</td>
              <td>Item 3</td>
              <td>Item 4</td>
              <td>Item 5</td>
            </tr>
            <tr>
              <td>Item 1</td>
              <td>Item 2</td>
              <td>Item 3</td>
              <td>Item 4</td>
              <td>Item 5</td>
            </tr>
            <tr>
              <td>Item 1</td>
              <td>Item 2</td>
              <td>Item 3</td>
              <td>Item 4</td>
              <td>Item 5</td>
            </tr>
            <tr>
              <td>Item 1</td>
              <td>Item 2</td>
              <td>Item 3</td>
              <td>Item 4</td>
              <td>Item 5</td>
            </tr>
            <tr>
              <td>Item 1</td>
              <td>Item 2</td>
              <td>Item 3</td>
              <td>Item 4</td>
              <td>Item 5</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

WordPress? Yikes.

Your best bet is to do some DOM manipulations after the HTML loads. I suggest using jquery. But if you can’t import jquery into your project. You can still of course achieve this with javascript.

var x = document.getElementsByClassName('.sp-row-no-4');
x[0].innerHTML = "Hello World!";

getElementsByClassName() returns an array even if only one element is found via that class name. Hope that helps.

I have a table that I’m trying to target the 5th row using CSS. It is buried under 4 divs.

What is the best way to target the table? It uses a class that is duplicated many times throughout the website on many other table but I only wish to target this table which I have added a class of .q4 to:

Basically I’m trying to change the bottom border of a row within the table which is nested in a div within a div, within a div, within a div. The full html is below:

<div class="mobile-league-table q4">
<div class="sportspress">
    <div class"sp-template sp-template-league-table">
        <h4 class="sp-table-caption">UAE Division 1</h4>
        <div class="sp-table-wrapper">
            <div class="sp-scrollable-table-wrapper">
                <table class="sp-league-table sp-data-table sp-scrollable-table" data-sp-rows="10">
                    <thead>
                        <tr>
                            <th class="data-rank">Pos</th>
                            <th class="data-name">Team</th>
                            <th class="data-p">P</th>
                            <th class="data-w">W</th>
                            <th class="data-l">L</th>
                            <th class="data-d">D</th>
                            <th class="data-pf">PF</th>
                            <th class="data-pa">PA</th>
                            <th class="data-pd">PD</th>
                            <th class="data-bp">BP</th>
                            <th class="data-pts">Pts</th>
                            <th class="data-form">Form</th>
                        </tr>
                    </thead>
                    <tbody>
                    <tr class="odd sp-row-no-0">…</tr>
                    <tr class="even sp-row-no-1">…</tr>
                    <tr class="odd sp-row-no-2">…</tr>
                    <tr class="even sp-row-no-3">…</tr>
                    <tr class="odd sp-row-no-4">…</tr>
                    <tr class="even sp-row-no-5">…</tr>
                    <tr class="odd sp-row-no-6">…</tr>
                    <tr class="even sp-row-no-7">…</tr>
                    <tr class="odd sp-row-no-8">…</tr>
                    <tr class="even sp-row-no-9">…</tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

Thanks