Link styling

[Ayala]

In this case:
http://codepen.io/una/pen/jrxbZq

…can I change for example the color of the buttons (#slide-1, #slide-2) while it is target?
I want to show which button I am on.

[Shikkediel]

This would be a solution if I could figure out how to make the link inside the label trigger :checked on the radio input…

Nearly working demo

[Ayala]

Thank you!
The radio buttons was my plan-B :)

Like this: https://codepen.io/arjancodes/pen/PwZppQ

Just I don’t know yet how it is working.
I am trying to figure it out.

[Shikkediel]

I’m not sure why the anchor link inside the label is “swallowing” the click on the input element. If someone could explain it to me that would be great. But here’s a version that uses the checkbox hack only:

Working demo

[Ayala]

Thank you for you demo! Nice! :)

[Ayala]

I’ve heard that the id is not useful today, because it is not dinamic.
It could be made with classes and :nth-child selectors as well, right?

[Shikkediel]

Sure, the slides don’t really need any unique identifiers but they are required for the inputs though so the for attribute of the labels can refer to them…

[Shikkediel]

I kinda overlooked that it would quite easy to address the ul sibling and it’s children here, going on the original pen. I’m not a big fan of :target though because it messes with the browser history. Maybe that caused my tunnel vision.

Of course your initial example won’t function without using an id on the slides…

[Author]

Posts