0

Just need help in writing a CSS selector. I want to select the last element of the below that has a class of RED

#tData td:nth-child(8)

I can't seem to figure out how to attache the RED class to the selector.

Dewinky
  • 83
  • 6
  • @AlliterativeAlice, not a duplicate. The other question is about selecting the last child having a particular class, which is not possible using CSS selectors. In CSS you can't select the first, last or n-th of a particular collection (selector). It can be done using Javascript, though. – tao May 06 '18 at 02:42
  • Use last-child selector, I think it can help you. https://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:last-child – Saliou673 May 06 '18 at 02:05
  • Not a duplicate question. The other question does not take into consideration that other columns can have a Red Class. Hence i was specific on the last cell in 8th column that is red. If that question was answered in that posting, i might be blind to the answer. – Dewinky May 07 '18 at 02:46

1 Answers1

1
#tData td.red:nth-child(8) {}

will select any 8th cell in its row, if the cell has "red" class, inside #tData.

If you want to select the last element in the <tr>, if that last element has the class of "red", use:

#tData td.red:last-child {}
tao
  • 82,996
  • 16
  • 114
  • 150
  • Will this work if i have other cells that have red, which are not the 8th? I only want the 8 column. – Dewinky May 06 '18 at 02:35
  • It will only select elements that satisfy all conditions at same time: are 8th child of their parent, have "red" class and are inside an element with id "tData" (this is about the first selector). – tao May 06 '18 at 02:36
  • That is why i added the comment, because it does not meet all . it fails on selecting the last one and the one that does, will fail because there ar other red class in other columns – Dewinky May 07 '18 at 02:43
  • @Dewinky, your question was not clear enough. From your comment under it, I now understand you want to select the last cell in the eighth column to have a class of `red`. If that's what you want, it's not possible with CSS. You can't select the last, first of n-th element a particular selector and your question is, in fact, a duplicate. – tao May 07 '18 at 03:30