How to select labels before input elements?

Question

I have labels which i want to style depending upon the :checked state of the radio buttons which are inside some divs below the labels. Can you suggest me a selector so i can target the corresponding label if a radio button is checked?

Here's my code:

<div class="clients">
        <!--labels i wanna style-->
            <label for="slide-1-trigger"><img src="http://livedemo00.template-help.com/wt_52537/images/index_img02.jpg"></label>

            <label for="slide-2-trigger"><img src="http://livedemo00.template-help.com/wt_52537/images/index_img03.jpg"></label>

            <label for="slide-3-trigger"><img src="http://livedemo00.template-help.com/wt_52537/images/index_img04.jpg"></label>  

         <div class="wrapper">
            <div id="carousel">

                <input id="slide-1-trigger" type="radio" value="slider1" name="sliders" checked>
                <div class="slide1 slider">
                        <a href="#">robert adams</a>
                        <p><q>Pellentesque sagittis, ipsum a tempor venenatis, ante justo molestie massa, quis aliquam est leo at lacus. Donec vel lacus egestas est rutrum vehicula eu eu lorem. Duis in faucibus ipsum, et fermentum neque. Curabitur egestas ipsum vitae erat tempus posuere. Donec elit nulla, varius sed vehicula et, ultrices id turpis. Aenean quis urna posuere, feugiat ex ut, congue mauris. Maecenas dapibus est at tellus malesuada congue vitae ac diam.</q></p>
                </div>

                <input id="slide-2-trigger" type="radio" value="slider2" name="sliders">
                <div class="slide2 slider">
                        <a href="#">monica perry</a>
                        <p><q>Nullam eu viverra ex. Aenean non lectus sit amet urna ultricies interdum at vehicula sem. Ut ac erat ante. Pellentesque tincidunt, dolor id ornare vestibulum, dolor diam consequat sapien, id pulvinar velit ex aliquet lectus. Cras elementum velit eget urna commodo ultrices. Sed sit amet quam molestie, lobortis justo in, efficitur diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis pulvinar pharetra</q></p>
                </div>

                <input id="slide-3-trigger" type="radio" value="slider3" name="sliders">
                <div class="slide3 slider">
                        <a href="#">john smith</a>
                        <p><q>Donec venenatis sagittis cursus. Vivamus non justo nec nunc lacinia laoreet. Vestibulum feugiat gravida dapibus. In maximus porta pretium. Aliquam vitae ornare dolor. Fusce sit amet nunc ac massa sagittis interdum ut a nisl. Nulla at lacus eu justo mattis pretium a ut tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</q></p>
                </div>

            </div>
        </div>     
    </div>

There is no selector that would work in this scenario...you can't select children of two different elements...and you certainly can't select UP the DOM. — Paulie_D, Dec 22 '15 at 13:58
work just as a custom attribute: `.elem [for="slide-1-trigger"] { }` or just `[for^="slide"] { } /* attribute starts with 'slide' */`. Adding `label` in front works too — Rene van der Lende, Dec 22 '15 at 14:04
I'm afraid you'll need to use some JavaScript for this. Have a look at this question about selecting the labels that correspond to input fields. I prefer a jQuery solution for this because it's concise and readable. If you place the label lookup code inside an event handler function like 'onchange', you can alter the DOM to apply styles or classes to the labels as each radio is selected. http://stackoverflow.com/questions/285522/find-html-label-associated-with-a-given-input — Andrew Tomlinson, Dec 22 '15 at 14:17

score 1 · Accepted Answer · answered Dec 22 '15 at 15:43

Your quesion is unsolvable with css-selectors, you have to use a bit of JavaScript.

In the following fiddle i used the class checked-label to indicate which label's radio button is checked. On change of the radio buttons the label of the checked radio button is selected and added the class checked-label, and checked-label is removed from any other label that has this class.

(I used jQuery, if you wish to use the code i provide be sure to include it)

The working fiddle is here, commentated!

ya i'm using jquery as well thnx anyway!! – varun teja Dec 22 '15 at 17:07 — varun teja, Dec 22 '15 at 17:07

score 0 · Answer 2 · answered Dec 22 '15 at 15:08

The labels must be siblings that follow inputs or children of siblings that follow the inputs. Then you can use the ~(general sibling) combinator in your rules to target them.

label {
  display: inline-block;
}

#slide-1-trigger:checked ~ label[for="slide-1-trigger"],
#slide-2-trigger:checked ~ label[for="slide-2-trigger"],
#slide-3-trigger:checked ~ label[for="slide-3-trigger"]{
  border: solid 2px green;
}

<div class="clients">
         <div class="wrapper">
            <div id="carousel">

                <input id="slide-1-trigger" type="radio" value="slider1" name="sliders" checked>
                <div class="slide1 slider">
                        <a href="#">robert adams</a>
                        <p><q>Pellentesque sagittis, ipsum a tempor venenatis, ante justo molestie massa, quis aliquam est leo at lacus. Donec vel lacus egestas est rutrum vehicula eu eu lorem. Duis in faucibus ipsum, et fermentum neque. Curabitur egestas ipsum vitae erat tempus posuere. Donec elit nulla, varius sed vehicula et, ultrices id turpis. Aenean quis urna posuere, feugiat ex ut, congue mauris. Maecenas dapibus est at tellus malesuada congue vitae ac diam.</q></p>
                </div>

                <input id="slide-2-trigger" type="radio" value="slider2" name="sliders">
                <div class="slide2 slider">
                        <a href="#">monica perry</a>
                        <p><q>Nullam eu viverra ex. Aenean non lectus sit amet urna ultricies interdum at vehicula sem. Ut ac erat ante. Pellentesque tincidunt, dolor id ornare vestibulum, dolor diam consequat sapien, id pulvinar velit ex aliquet lectus. Cras elementum velit eget urna commodo ultrices. Sed sit amet quam molestie, lobortis justo in, efficitur diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis pulvinar pharetra</q></p>
                </div>

                <input id="slide-3-trigger" type="radio" value="slider3" name="sliders">
                <div class="slide3 slider">
                        <a href="#">john smith</a>
                        <p><q>Donec venenatis sagittis cursus. Vivamus non justo nec nunc lacinia laoreet. Vestibulum feugiat gravida dapibus. In maximus porta pretium. Aliquam vitae ornare dolor. Fusce sit amet nunc ac massa sagittis interdum ut a nisl. Nulla at lacus eu justo mattis pretium a ut tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</q></p>
                </div>
                <!--labels i wanna style-->
                <label for="slide-1-trigger"><img src="http://livedemo00.template-help.com/wt_52537/images/index_img02.jpg"></label>

                <label for="slide-2-trigger"><img src="http://livedemo00.template-help.com/wt_52537/images/index_img03.jpg"></label>

                <label for="slide-3-trigger"><img src="http://livedemo00.template-help.com/wt_52537/images/index_img04.jpg"></label>
            </div>
        </div>     
    </div>

Even if it works *for this particular case*, it is impossible to use it in a dynamic evniorment and will fail eventually. You use unique identifiers to style the css. If any other option would be added, it would not be styled! — Clemens Himmer, Dec 22 '15 at 15:46
I think you want to change it to: `input[type="radio"] ~ label` — Jamie Barker, Dec 22 '15 at 15:58

How to select labels before input elements?

2 Answers2