CSS not being applied inside of Table.

[zemaker]

I am trying to have CSS applied within a table…when you check the checkbox it crosses out the name, but its not working, see here:

html

Byrnes, Amanda

Incomplete

CSS

input[type="checkbox"]:checked + label {

text-decoration:

line-through;

color: rgba(0,0,0,.3);

}

However it does work if I take it out of a table.

[Paulie_D]

My guess is that it’s the table that’s causing the issue. Try taking it out.

http://codepen.io/anon/pen/LzgDt

Generally, current thinking is that there would be no need for a table for layout purposes.

[zemaker]

Sadly that is not an option, this is a table that contains multiple columns and has pagination. Taking it out of a table is not an option.

ideally this this what it would be:
http://codepen.io/anon/full/LzgDt

[Kitty Giraudel]

The problem isn’t directly the table. To use the + sibling selector, the elements need to share the same parent.

But in your example, the label and the input are not in the same container. Make them siblings and everything will work like a charm. ;)

[Paulie_D]

Aha! :)

[zemaker]

I want to use this example http://codepen.io/ImBobby/full/EdALB but inside a table…you know be fancy and all :)

[Kitty Giraudel]

Again, both the label and the input have to be in the same parent in order to make the siblings selectors (+ and ~) work. From there, you can do whatever you want with your table layout.

[Paulie_D]

I could say, and I will…why is he use a table your quoted example does not.

Why not look at the full breakdown of your linked example: http://codepen.io/ImBobby/pen/EdALB

Much prettier and better structured too. We (and by ‘we’ I mean us modern new-fangled people) only use tables where there is, you know, tabular data involved.

Hugo has it right.

[zemaker]

Sadly this will be tabular data, student attendance and what have you….

[Paulie_D]

I don’t see that this is REALLY tablular data but so be it. It seems that that’s the way you want to go.

I can only suggest that you provide us with a link to a live site for us to fully examine.

[zemaker]

Sadly I can’t provide you w/ the working code but here is a screen capture: http://i.imgur.com/t8BMb.png

[Senff]

Yup, both the checkbox and the label have to be in the same TD: http://codepen.io/senff/pen/BLrjq

[Author]

Posts