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

Magdalena Misiuna
Magdalena Misiuna
14,726 Points
Posted by Magdalena Misiuna
Magdalena Misiuna
14,726 Points

checked radio button css styling

radio button changes its appearance on :hover, not on :checked. What is wrong with the code?

css:

.slide-nav label:hover { - WORKING background: #CC2C2E; color: #fff; }

.slide-nav label:checked { - NOT WORKING background: #CC2C2E; color: #fff; }

input[type = radio]:checked { - NOT WORKING background: #CC2C2E; color: #fff; }

[id^="slide"]:checked + .slide { - WORKING left: 0; z-index: 100; transition: left .65s ease-out; }

[id^="slide"]:checked + label { - NOT WORKING left: 0; z-index: 100; transition: left .65s ease-out; }

html: <div class="slide-wrap">

    <header class="slide-nav">
            <label for="slide-1-trigger" class="label-one">one</label>
            <label for="slide-2-trigger" class="label-two">two</label>
            <label for="slide-5-trigger" class="label-five">three</label>
    </header>



        <input id="slide-1-trigger" type="radio" name="slides" checked>

        <section class="slide slide-one">
        <div class="questionwithicon">
        <svg id="CQround"xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20.96 21.19"><defs>
        <clipPath id="clip-path" transform="translate(-372 -552.56)"><rect class="cls-1" x="372" y="552.56" width="20.96" height="20.44"/></clipPath></defs>
        <path class="red" d="M382.1,572.76a10.1,10.1,0,1,0-10.1-10.1,10.1,10.1,0,0,0,10.1,10.1" transform="translate(-372 -552.56)"/></g>
        <polygon class="red" points="10.1 16.71 20.96 20.44 20.96 20.44 17.36 12.14 10.1 16.71"/>
        <text class="q" transform="translate(3.9 15.23)">Q</text></g></svg>

        <p class="NO-Bullet">           
        What role did significant individuals and organizations play in the civil rights movement?</p>
        </div>
                </section>      


        <input id="slide-2-trigger" type="radio" name="slides">

        <section class="slide slide-two">
        <div class="questionwithicon">
        <svg id="CQround"xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20.96 21.19"><defs>
        <clipPath id="clip-path" transform="translate(-372 -552.56)"><rect class="cls-1" x="372" y="552.56" width="20.96" height="20.44"/></clipPath></defs>
        <path class="red" d="M382.1,572.76a10.1,10.1,0,1,0-10.1-10.1,10.1,10.1,0,0,0,10.1,10.1" transform="translate(-372 -552.56)"/></g>
        <polygon class="red" points="10.1 16.71 20.96 20.44 20.96 20.44 17.36 12.14 10.1 16.71"/>
        <text class="q" transform="translate(3.9 15.23)">Q</text></g></svg>

        <p class="NO-Bullet">
        How did key events in the struggle for civil rights bring about change?</p>
        </div>
                </section>

1 Answer

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,967 Points
KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,967 Points

The :checked pseudo-class is only associated with input (<input>) elements of type radio and checkbox. Therefore label:checked won't work. You could try the code provided by klewis on this stack overflow. It is the answer that starts with "As Fred mentioned, ..."