Target first TR class in a table

Question

I've looked around at the duplicate threads but can't seem to find a suitable solution for my particular requirement.

Is there a way in which I can target the first .future tr tag? I'm trying to make the entire row a red background without affecting the other rows.

Edit: Not a duplicate as the marked answer does not work for this particular requirement.

Edit2: I didn't actually consider using jquery! Thank you! :-)

Edit3: Must have missed Nick Craver's answer on the duplicate. Still, thank you for providing the answer clearly on this thread.

It's a duplicate because there's the explanation: **You can't with CSS** . The solutions in the answers are in jQuery because **you can't with CSS**. You can save the final "Hello!" . And you didn't mark with the correct tag — Marcos Pérez Gude, Oct 02 '15 at 11:02
"Not a duplicate as the marked answer does not work for this particular requirement." Has it never occurred to you that there might be other answers besides the accepted one? — BoltClock, Oct 02 '15 at 11:17
No need to be rude :-) I did have a quick look through other threads but missed Nick Craver's answer as it was so far down the page. All sorted now though so thank you to all for the help! — gromey, Oct 07 '15 at 10:16

Andy Furniss · Answer 1 · 2015-10-02T11:36:27.737

You don't really need JavaScript for something like this. If you want a CSS-only solution use this:

tr.future:first-child, tr:not(.future) + tr.future {
    ...
}

Fiddle here: http://jsfiddle.net/andyfurniss/hm6uy4fw/1/

The :first-child rule is just to cover yourself in case the first row is a future row as it won't have a preceding row.

EDIT: Updated fiddle as I had only put the class on one element which didn't demonstrate the validity of the solution properly.

score 1 · Answer 2 · answered Oct 02 '15 at 11:40

A pure CSS way of doing it would be using a combination of the Child Selector and the General sibling combinator.

tbody > .future {
    background: red;
}

tbody > .future ~ .future {
    background: none;
}

JSFiddle: https://jsfiddle.net/x2kLko7L/

This way you target all elements with the class "future", apply the red background, and then remove the background again from all elements with class "future" that are preceded by an element that also has the class "future".

This leaves only the first element with the red background as it's the only one that isn't preceded by an element of the same class.

It's a bit of a workaround and it really should just be made so ":first-of-type" works on classes or we get an ":first-of-class" selector. But alas.

score 0 · Answer 3 · answered Oct 02 '15 at 10:59

0

You can select tr with class 'future' with first selector.

$("table tr.future:first")

in your case it can be

$("#fixtures tr.future:first")

answered Oct 02 '15 at 10:59

SSA

5,433
4
36
50

score 0 · Accepted Answer · answered Oct 02 '15 at 10:59

0

Try this

 $("#fixtures tbody tr.future:first td").css("background-color","red");

answered Oct 02 '15 at 10:59

Rakin

1,271
14
30

1

Perfect! I didn't even consider looking outside of CSS! – gromey Oct 02 '15 at 11:03

Target first TR class in a table

4 Answers4