How to change parent element css-properties by clicking on his child without javascript


Tags: javascript,html,css

Problem :

I want to change the style of some parent element by clicking on his child without javaScript. For example: click on .button or .text-container must change his parent background-color (.right-side/.left-side).

<div class="main-container">  
    <div class="table parent-size">
        <div class="table-cell parent-half-width left-side">
            <div class="table parent-size">   
                <div class="table-cell vertical-align-middle to-right-inline text-container">
                    Left side text      
                </div>
                <div class="table-cell vertical-align-middle to-center-inline">
                    <span class="button"></span>
                </div>      
            </div>        
        </div>
        <div class="table-cell parent-half-width right-side active">
            <div class="table parent-size">
                <div class="table-cell vertical-align-middle to-center-inline">
                    <span class="button active"></span>
                </div>      
                <div class="table-cell vertical-align-middle to-left-inline text-container">
                    Right side text
                </div> 
            </div>
        </div>
    </div>
</div>

.main-container {
    width: 600px;
    height: 60px;
    color: #fff;
    font-size: 14px;
}
.left-side, .right-side {
    background: #212121;
}
.right-side.active {
    background: #E3A215;
}
.left-side.active {
    background: #5D7FE6;
}
.button {
    width: 16px;
    height: 16px;
    display: inline-block;
    cursor: pointer;
    border: 3px solid #cfcfcf;
}

See Fiddle



Solution :

I resolved this problem by using hidden input type="checkbox" with label for this element. The input located above target parent block (".left-side"), the label located inside .left-side block. Click on label toggle input condition. And in css I use css3 pseudo-class "checked".

In my case I have a two buttons that must be switched. The active button has another background-color and another view of .button, that's why I use input type="radio".

Maybe this will be useful for somebody. Solution takes only a couple of css-lines and few additional html-tags.

<div class="main-container">

    <div class="table parent-size">

        <input id="answer-left" class="css-checkbox" name="votingButton" type="radio" />
        <div class="table-cell parent-half-width left-side answer-wrapper">
            <div class="table parent-size">   
                <div class="table-cell vertical-align-middle to-right-inline">
                    <label for="answer-left" class="answer">
                        <div class="table-cell vertical-align-middle to-right-inline text-container">
                            Left side text      
                        </div>
                        <div class="table-cell vertical-align-middle to-center-inline button-wrap">
                            <span class="button">&nbsp;</span>
                        </div> 
                    </label>
                </div>
            </div>        
        </div>
        ...
    </div>
</div> 

.css-checkbox {
     display: none;
}
.css-checkbox:checked + .answer-wrapper.left-side {
    background: #E3A215;
}
.css-checkbox:checked + .answer-wrapper.right-side {
    background: #5D7FE6;
}
.css-checkbox:checked + .answer-wrapper .button {
    width: 22px;
    height: 22px;
    background: url(http://goo.gl/Yw9qN1) no-repeat;
    border: none;
}

See Fiddle


    CSS Howto..

    simple text input box “autosuggest” script - how to overlap with css

    How to have background-image and gradient background-color work on one selector in CSS?

    How make a page fit on any screen with any orientation [closed]

    How to share CSS StyleSheet amongst projects?

    How do I position the search box to my specs?

    how to create this css?

    How to make like this gradient sun effect using CSS?

    How to get css 3 column layout with floats and no margins?

    how to ajust the background pic according to outer div in css

    How to ignore parent's width limit in CSS

    How to size this text with css?

    How do I avoid multiple jquery dropdown boxes interfering with eachother

    How can I conform to a 4 nest rule?

    How to hide the information, just only show when button is clicked html, css. javascript?

    Way of Determining How Many Style Rules I have

    how to apply transform rotate all browse in inline css using jquery

    How do I script such that my panoramic image can be panned left and right up to its edges?

    TD Borders from a table, not showing in IE8 [duplicate]

    on hover and on click how to fade out image and fade in content text

    How do you size an SWF object based on a Blueprint CSS span range?

    How to set a background color defined as a CSS class (using JQuery eventually)?

    How can I prevent the textarea from stretching beyond his parent DIV element? (google-chrome issue only)

    How to apply CSS string using Javascript/jQuery without parsing/tokenizing to retrieve property-value pairs?

    Django - how to collapse forms like in the django admin

    Button Built in CSS showing different font color in FF and Webkit

    R markdown: how to change style with internal css?

    How do I get a dropdown choice to show up on the left of an entry on this To-Do list?

    Javascript/CSS- how to change the colour of a textarea scrollbar without a third party JS library?

    css - how to remove inherited style

    How to find a div / panel in repeater and apply css?