CSS Selector Targeting

Question

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

The in question is the Abilities under located after the Weapons

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.


  
    Psyker
    Cast
    Deny
    Powers Known
    Other
  
  
    Primaris Librarian
    2
    1
    Smite, 2 Librarius
    -
  


  
    Unit
    M
    WS
    BS
    S
    T
    W
    A
    Ld
    Save
  
  
    Primaris Librarian
    6"
    3+
    3+
    4
    4
    5
    4
    9
    3+
  


  
    Weapon
    Range
    Type
    S
    AP
    D
    Abilities
  
  
    Bolt pistol
    12"
    Pistol 1
    4
    0
    1
    -
  
  
    Force sword
    Melee
    Melee
    +1
    -3
    D3
    -
  
  
    Frag grenades
    6"
    Grenade D6
    3
    0
    1
    Blast.
  
  
    Krak grenades
    6"
    Grenade 1
    6
    -1
    D3
    -

user_19140003 · Answer

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 that your trying to target. Abilities

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

user_3744304 · Answer

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; }


  
    Psyker
    Cast
    Deny
    Powers Known
    Other
  
  
    Primaris Librarian
    2
    1
    Smite, 2 Librarius
    -
  


  
    Unit
    M
    WS
    BS
    S
    T
    W
    A
    Ld
    Save
  
  
    Primaris Librarian
    6"
    3+
    3+
    4
    4
    5
    4
    9
    3+
  


  
    Weapon
    Range
    Type
    S
    AP
    D
    Abilities
  
  
    Bolt pistol
    12"
    Pistol 1
    4
    0
    1
    -
  
  
    Force sword
    Melee
    Melee
    +1
    -3
    D3
    -
  
  
    Frag grenades
    6"
    Grenade D6
    3
    0
    1
    Blast.
  
  
    Krak grenades
    6"
    Grenade 1
    6
    -1
    D3
    -

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';


  
    Psyker
    Cast
    Deny
    Powers Known
    Other
  
  
    Primaris Librarian
    2
    1
    Smite, 2 Librarius
    -
  


  
    Unit
    M
    WS
    BS
    S
    T
    W
    A
    Ld
    Save
  
  
    Primaris Librarian
    6"
    3+
    3+
    4
    4
    5
    4
    9
    3+
  


  
    Weapon
    Range
    Type
    S
    AP
    D
    Abilities
  
  
    Bolt pistol
    12"
    Pistol 1
    4
    0
    1
    -
  
  
    Force sword
    Melee
    Melee
    +1
    -3
    D3
    -
  
  
    Frag grenades
    6"
    Grenade D6
    3
    0
    1
    Blast.
  
  
    Krak grenades
    6"
    Grenade 1
    6
    -1
    D3
    -

CSS Selector Targeting

2 Answers