CSS: how to apply styles to the last of a CSS class (not the last of )

Question

I have the following HTML:

<tr>
    <td class="column-text">column 1</td>
    <td class="column-text">column 2</td>
    <td class="column-text">column 3</td>
    <td class="column-text">column 4</td>
    <td>last column has no class</td>
</tr>

Note that the number of cells with class "column-text" is dynamic.

I have the following CSS:

tr td.column-text:last-child {
    color: red;
}

Note that this selector seems not working.

What is the right CSS selector for the last <td> with class "column-text"?

Thanks and regards.

UPDATE 1

Just wanted to share this, which is puzzling to me. The following is working!

tr td.column-text:first-child {
    color: red;
}

But as said in the post, I hope to apply styles to the last cell with the given class.

UPDATE 2

Here is what I did to solve this problem after realizing there is no direct CSS solution based on the input from helping folks. When generating the dynamic html, I added a special class to the last <td> with "column-text" class.

Thanks to all folks who rushed to help!!!

Deryck, thanks for the link! I am not sure whether that answer is the answer. tr td.column-text:last-child {color: red;} does not apply to the last (without "column-text" class) based on my tests. However, tr td.column-text:first-child {color: red;} works for the first — curious1, Mar 28 '15 at 04:30
There is no pure-CSS solution simply because the pseudo class selector does not apply to classes in a combinatorial way, not as intuitively as we thought. `.class:last-child` selects the last occurring element that has the class, not the last occurring element *of* the class. We are yet to have the `:last-of-class` selector, so JS is the only way. — Terry, Mar 28 '15 at 04:34
Terry, could you please expand a little on ".class:last-child selects the last occurring element that has the class, not the last occurring element of the class."? I dont fully get it. Thanks!! — curious1, Mar 28 '15 at 04:45
`last-child` selects the last child. When you add the class selector it acts as a filter. If the last child happens to have that class it is selected. If not, then nothing is selected. — But those new buttons though.., Mar 28 '15 at 04:58
It would be great if you write your solution as an answer and accept it so that no one else finds this question looking for unanswered questions; and it would be easier for those with similar questions to find your answer. — Kamran Ahmed, Mar 28 '15 at 05:37

Prashant Ghimire · Answer 1 · 2015-03-28T16:25:46.260

4

HTML

<table>
<tr>
    <td class="column-text">column 1</td>
    <td class="column-text">column 2</td>
    <td class="column-text">column 3</td>
    <td class="column-text">column 4</td>
    <td class="column-text">column 5</td>
    <td class="column-text">column 6</td>
    <td class="column-text">column 7</td>
    <td class="column-text">column 8</td>
    <td class="column-text">column 9</td>
    <td>last column has no class</td>
</tr>
</table>

CSS

tr td:nth-last-child(2){
   color:red;
}

This will expect there to be exactly only one td sibling at the end without the class column-text.

Fiddle

edited Mar 28 '15 at 16:25

answered Mar 28 '15 at 04:14

Prashant Ghimire

4,890
3
35
46

Prashant, thanks for chiming in! Your answer seems not working. – curious1 Mar 28 '15 at 04:18
Prashant, your answer is not what I am looking for. Please read my question again. Thanks! – curious1 Mar 28 '15 at 04:26
@curious1 See if this is what you wanted. – Prashant Ghimire Mar 28 '15 at 05:25
@curious1 I would expect Prashant's answer in its current form to always select the last td.column-text. Is the number of td elements without the class also variable, or does the tr always end with exactly one classless td? – csj Mar 28 '15 at 06:22
@curious1 It will not select the last `column-text` element. It will expect there to be only once `td` sibbling after the last `column-text`. Other than that, I don't think there's more dynamic solution only using CSS3. – Prashant Ghimire Mar 28 '15 at 06:28
It's hard coded but allows `.column-text` to be dynamic. – Prashant Ghimire Mar 28 '15 at 06:40
Prashant, I added my answer based on suggestion from Kamran. – curious1 Mar 28 '15 at 15:23

But those new buttons though.. · Answer 2 · 2015-03-28T04:22:05.537

2

I don't think you can do it with CSS. Here's a jQuery solution if you're interested:

$('td.column-text').eq($('td.column-text').length-1).css({color:'red'});

edited Mar 28 '15 at 04:22

answered Mar 28 '15 at 04:16

But those new buttons though..

21,377
10
81
108

billynoah, thanks for your input. I am hoping to have a CSS solution. – curious1 Mar 28 '15 at 04:20
Yeah, I got that. If it's possible I'd love to know as well but I don't think so.. – But those new buttons though.. Mar 28 '15 at 04:22

Kamran Ahmed · Answer 3 · 2015-03-28T05:35:29.787

2

last-of-type may have worked but it doesn't work with class names. If you don't mind, you may use:

$("td.column-text").last().css("color", "red");

JSFiddle

edited Mar 28 '15 at 05:35

answered Mar 28 '15 at 04:17

Kamran Ahmed

7,661
4
30
55

Kamran, thanks for your input! I am hoping to have a CSS solution. – curious1 Mar 28 '15 at 04:20
same as my answer but `last()` is better.. forgot about that one :-) – But those new buttons though.. Mar 28 '15 at 04:21

Anthony Carbon · Answer 4 · 2015-03-28T04:32:06.420

1

I think you are looking an answer something like this example. See here

enter image description here

edited Mar 28 '15 at 04:32

answered Mar 28 '15 at 04:01

Anthony Carbon

608
1
5
18

Anthony, as said in the post, the number of with class "column-text" is dynamic. It could be 3, 4, 5, 6, etc. Thanks for your help! – curious1 Mar 28 '15 at 04:03
Anthony, in my case. It is a table. All elements under need to be the same tag. last-of-type is helpful in your html structure. Not working in my scenario. Thanks. – curious1 Mar 28 '15 at 04:38

score 1 · Answer 5 · answered Mar 28 '15 at 04:31

1

Here is a CSS solution

td.column-text:nth-last-child(2) {color: red;}

answered Mar 28 '15 at 04:31

xengravity

3,501
18
27

score 0 · Accepted Answer · answered Mar 28 '15 at 15:20

As folks here indicated, there is no pure-CSS solution for this. What I did is to simply add a new class ("last-column") to the last with the given class. Something like the following:

<tr>
    <td class="column-text">column 1</td>
    <td class="column-text">column 2</td>
    <td class="column-text">column 3</td>
    <td class="column-text last-column">column 4</td>
    <td>last column has no class</td>
</tr>

The above html is generated dynamically and I am able to know which one is the last td with "column-text". I feel this way is better than using Javascript.

Cheers.

CSS: how to apply styles to the last of a CSS class (not the last of )

6 Answers6