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 trial

CSS Create a Fullscreen Slider with CSS

Tiffany McAllister
Tiffany McAllister
25,806 Points
Posted by Tiffany McAllister
Tiffany McAllister
25,806 Points

Highlighting 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
Pete Cass
16,656 Points

You 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.

Tiffany McAllister
Tiffany McAllister
25,806 Points
Tiffany McAllister
Tiffany McAllister
25,806 Points

Yeah, that's what I thought. Thanks for your answer :)

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

You 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).

index.html 
  <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).

horizontal.css 
#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
Yonatan Arbel
7,055 Points
Yonatan Arbel
Yonatan Arbel
7,055 Points

you need to select the input with its class then the type:

input.sec-visible[type="checkbox"]:checked

Tiffany McAllister
Tiffany McAllister
25,806 Points
Tiffany McAllister
Tiffany McAllister
25,806 Points

This just selects the actual input that is checked. I want to select the label for a checked input.