How do I target a table that is buried under some divs? - html

Question

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

Answer 1

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>

Answer 2

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.