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

Solution 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.

Problem :

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

Comments

Comment posted by Roberto Zvjerković

Give the table an id or a class.

Comment posted by smoksnes

You don’t need to define the entire tree as long as you know the class of the element. If the element you want has class

Comment posted by TylerH

Please add your HTML markup. Until you do we can only guess at how it should be selected.

Comment posted by seosheikh

Ive added the markup. Thanks

Comment posted by Paulie_D

Are their many tables within this

By

Leave a Reply

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