Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialTiffany McAllister
25,806 PointsHighlighting the current slide's label
Using just CSS, how would you target the checked input's label? I know you could do this if the label was positioned next to the input in the HTML but given how the HTML is structured, is this possible?
Edit:
<header>
<label for="slide-one">Slide One</label>
<label for="slide-two">Slide Two</label>
</header>
<input id="slide-one" type="radio" name="slides" checked>
<input id="slide-two" type="radio" name="slides">
3 Answers
Pete Cass
16,656 PointsYou can use the adjacent sibling selector like this
.trigger:checked + label {
}
but you would have to change the markup. I'm pretty certain you can't do this what you want with the current html as it is. It would be very simple to do with JavaScript though.
Iain Simmons
Treehouse Moderator 32,305 PointsYou can, by using general sibling selectors. That requires the labels to be inside an element that comes after the inputs, but shares the same parent.
Here's a CodePen of it in action, forked from the one David made: http://codepen.io/iainsimmons/pen/YwOmQr
I did it by changing the header
to a nav
element, and moving it after the last section
(but still inside the .wrap
element).
<div class="wrap">
...
<input id="slide-4-trigger" type="radio" name="slides">
<section class="slide slide-four">
<h1>Headline Four</h1>
</section>
<nav>
<label for="slide-1-trigger">Slide One</label>
<label for="slide-2-trigger">Slide Two</label>
<label for="slide-3-trigger">Slide Three</label>
<label for="slide-4-trigger">Slide Four</label>
</nav>
</div>
The CSS is a little bit repetitive, but it gets the job done! (Sass makes this easier, see the CodePen I made).
#slide-1-trigger:checked ~ nav label:nth-child(1),
#slide-2-trigger:checked ~ nav label:nth-child(2),
#slide-3-trigger:checked ~ nav label:nth-child(3),
#slide-4-trigger:checked ~ nav label:nth-child(4) {
background: #2e353b;
}
Yonatan Arbel
7,055 Pointsyou need to select the input with its class then the type:
input.sec-visible[type="checkbox"]:checked
Tiffany McAllister
25,806 PointsThis just selects the actual input that is checked. I want to select the label for a checked input.
Tiffany McAllister
25,806 PointsTiffany McAllister
25,806 PointsYeah, that's what I thought. Thanks for your answer :)