Change table row colour when checkbox is checked using CSS3 selectors?

Question

Is there a way to change the colour of a row in a table when a checkbox in the row is checked using only CSS selectors?

I have the following, but it changes the colour of the checkbox, not the table cells:

.table_class tr td.column0 input[type="checkbox"]:checked { background-color:#f00; }

Essentially what you're asking for is a parent selector, which doesn't exist (yet) in CSS. The reason you're only able to change the color of the checkbox is because the snippet you posted targets/selects the checkbox, not the parent table cell. — stevelove
– stevelove, Commented Nov 1, 2010 at 20:20

2ne · Accepted Answer · 2013-06-25 10:59:56Z

3

You could use a little bit of JS? This would act like a checkbox, without having to use a checkbox. DEMO

$("table tr").click(function() {
   $("table tr").css("background", "red"); //reset to original color
   $(this).css("background", "blue"); //apply the new color
});

answered Jun 25, 2013 at 10:59

2ne

6,0169 gold badges35 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sarfraz · Accepted Answer · 2010-11-01 17:58:45Z

2

AFAIK, that's not possible with pure CSS to work out both conditions of checkbox. This won't work in IE < 9 either. You will have to resort to javascript for that.

answered Nov 1, 2010 at 17:58

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

Collectives™ on Stack Overflow

Change table row colour when checkbox is checked using CSS3 selectors?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related