CSS Selector Targeting-CodePudding

I'm trying to target a particular <th> within the table below and only that particular <th>

The <th> in question is the <th>Abilities</th> under located after the <th>Weapons</th>

There will be multiple of these in the larger dataset but being able to target in this smaller set of data would be ideal test.

I know :nth-child, :nth-of-type aren't able to help here due to their selector limitations, but is there a way to do so at all?

I'm very much a novice coder and this code is an output from an app with zero support from the developer anymore so highly unlikely the core coding design will ever change.

I also using an external stylesheet which I'd hope the code if there is any would sit in there.

<table cellspacing="-1">
  <tr>
    <th>Psyker</th>
    <th>Cast</th>
    <th>Deny</th>
    <th>Powers Known</th>
    <th>Other</th>
  </tr>
  <tr>
    <td >Primaris Librarian</td>
    <td>2</td>
    <td>1</td>
    <td>Smite, 2 Librarius</td>
    <td>-</td>
  </tr>
</table>
<table cellspacing="-1">
  <tr>
    <th>Unit</th>
    <th>M</th>
    <th>WS</th>
    <th>BS</th>
    <th>S</th>
    <th>T</th>
    <th>W</th>
    <th>A</th>
    <th>Ld</th>
    <th>Save</th>
  </tr>
  <tr>
    <td >Primaris Librarian</td>
    <td>6"</td>
    <td>3 </td>
    <td>3 </td>
    <td>4</td>
    <td>4</td>
    <td>5</td>
    <td>4</td>
    <td>9</td>
    <td>3 </td>
  </tr>
</table>
<table cellspacing="-1">
  <tr>
    <th>Weapon</th>
    <th>Range</th>
    <th>Type</th>
    <th>S</th>
    <th>AP</th>
    <th>D</th>
    <th>Abilities</th>
  </tr>
  <tr>
    <td >Bolt pistol</td>
    <td>12"</td>
    <td>Pistol 1</td>
    <td>4</td>
    <td>0</td>
    <td>1</td>
    <td>-</td>
  </tr>
  <tr>
    <td >Force sword</td>
    <td>Melee</td>
    <td>Melee</td>
    <td> 1</td>
    <td>-3</td>
    <td>D3</td>
    <td>-</td>
  </tr>
  <tr>
    <td >Frag grenades</td>
    <td>6"</td>
    <td>Grenade D6</td>
    <td>3</td>
    <td>0</td>
    <td>1</td>
    <td>Blast.</td>
  </tr>
  <tr>
    <td >Krak grenades</td>
    <td>6"</td>
    <td>Grenade 1</td>
    <td>6</td>
    <td>-1</td>
    <td>D3</td>
    <td>-</td>
  </tr>
</table>

CodePudding user response：

Easy to achieve in your example HTML, with the help of some pseudo selectors:

table:nth-of-type(3) tr:first-of-type :last-child { color: red; }

<table cellspacing="-1">
  <tr>
    <th>Psyker</th>
    <th>Cast</th>
    <th>Deny</th>
    <th>Powers Known</th>
    <th>Other</th>
  </tr>
  <tr>
    <td >Primaris Librarian</td>
    <td>2</td>
    <td>1</td>
    <td>Smite, 2 Librarius</td>
    <td>-</td>
  </tr>
</table>
<table cellspacing="-1">
  <tr>
    <th>Unit</th>
    <th>M</th>
    <th>WS</th>
    <th>BS</th>
    <th>S</th>
    <th>T</th>
    <th>W</th>
    <th>A</th>
    <th>Ld</th>
    <th>Save</th>
  </tr>
  <tr>
    <td >Primaris Librarian</td>
    <td>6"</td>
    <td>3 </td>
    <td>3 </td>
    <td>4</td>
    <td>4</td>
    <td>5</td>
    <td>4</td>
    <td>9</td>
    <td>3 </td>
  </tr>
</table>
<table cellspacing="-1">
  <tr>
    <th>Weapon</th>
    <th>Range</th>
    <th>Type</th>
    <th>S</th>
    <th>AP</th>
    <th>D</th>
    <th>Abilities</th>
  </tr>
  <tr>
    <td >Bolt pistol</td>
    <td>12"</td>
    <td>Pistol 1</td>
    <td>4</td>
    <td>0</td>
    <td>1</td>
    <td>-</td>
  </tr>
  <tr>
    <td >Force sword</td>
    <td>Melee</td>
    <td>Melee</td>
    <td> 1</td>
    <td>-3</td>
    <td>D3</td>
    <td>-</td>
  </tr>
  <tr>
    <td >Frag grenades</td>
    <td>6"</td>
    <td>Grenade D6</td>
    <td>3</td>
    <td>0</td>
    <td>1</td>
    <td>Blast.</td>
  </tr>
  <tr>
    <td >Krak grenades</td>
    <td>6"</td>
    <td>Grenade 1</td>
    <td>6</td>
    <td>-1</td>
    <td>D3</td>
    <td>-</td>
  </tr>
</table>

If, due to the dynamic nature of the HTML, using pseudo selectors won't work for you, there sadly is no other way of achieving this other than adding a class, or resorting to JS:

[...document.querySelectorAll('th')].find(th => th.textContent === 'Abilities').style.color = 'red';

<table cellspacing="-1">
  <tr>
    <th>Psyker</th>
    <th>Cast</th>
    <th>Deny</th>
    <th>Powers Known</th>
    <th>Other</th>
  </tr>
  <tr>
    <td >Primaris Librarian</td>
    <td>2</td>
    <td>1</td>
    <td>Smite, 2 Librarius</td>
    <td>-</td>
  </tr>
</table>
<table cellspacing="-1">
  <tr>
    <th>Unit</th>
    <th>M</th>
    <th>WS</th>
    <th>BS</th>
    <th>S</th>
    <th>T</th>
    <th>W</th>
    <th>A</th>
    <th>Ld</th>
    <th>Save</th>
  </tr>
  <tr>
    <td >Primaris Librarian</td>
    <td>6"</td>
    <td>3 </td>
    <td>3 </td>
    <td>4</td>
    <td>4</td>
    <td>5</td>
    <td>4</td>
    <td>9</td>
    <td>3 </td>
  </tr>
</table>
<table cellspacing="-1">
  <tr>
    <th>Weapon</th>
    <th>Range</th>
    <th>Type</th>
    <th>S</th>
    <th>AP</th>
    <th>D</th>
    <th>Abilities</th>
  </tr>
  <tr>
    <td >Bolt pistol</td>
    <td>12"</td>
    <td>Pistol 1</td>
    <td>4</td>
    <td>0</td>
    <td>1</td>
    <td>-</td>
  </tr>
  <tr>
    <td >Force sword</td>
    <td>Melee</td>
    <td>Melee</td>
    <td> 1</td>
    <td>-3</td>
    <td>D3</td>
    <td>-</td>
  </tr>
  <tr>
    <td >Frag grenades</td>
    <td>6"</td>
    <td>Grenade D6</td>
    <td>3</td>
    <td>0</td>
    <td>1</td>
    <td>Blast.</td>
  </tr>
  <tr>
    <td >Krak grenades</td>
    <td>6"</td>
    <td>Grenade 1</td>
    <td>6</td>
    <td>-1</td>
    <td>D3</td>
    <td>-</td>
  </tr>
</table>

CodePudding user response：

If you're able to add html to the existing table structure the easiest thing to do would be to put a class on the <th> that your trying to target. <th >Abilities</th>

With the class added you can then apply styles to that class and they will apply only to any element in the table that you have assigned that class name to.

Then adding this class with the styles you want to your css sheet should do the trick.

.abilities {
   custom css styles here!
}

EDIT

Because you cant add styles directly to the existing HTML structure you could use Javascript or jQuery to crawl the page contents and find the word "Abilities" the code for that might look something like this

jQuery('th:contains("Abilities")').addClass('customClassName');

There might be some playing around needed to get it functioning exactly the way you want but this could be an option

the :has() Selector might also be usefull