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

    CSS Sprites - How to align and make responsive?

    Sencha Touch 2: how to remove right arrow of datepickerfield by using css?

    How do you make 2 YouTube videos automatically play one after the other?

    How to make rotate photos when you change position iPhones in ios app [closed]

    How to change css file for this aim?

    how do i get images to display in a rows like this using php and css?

    How to remove spacing between tags?

    How to use font-face with cssless?

    How to decode base64-encoded font information?

    How to get Width of html control (in pixel ) from charaters contained by that control

    Django Allauth - How to add custom css class to fields?

    css: how to surround an image with two other images vertically centered around the first one?

    How to apply CSS to the first letter after :before content?

    How to set a:visited and a:hover programmatically in ASP.NET

    How to change 'inherited' font families using the CSS style sheet

    js Find Class Within Div + toggle CSS/Hide One Show Other

    how to connect circles with lines without ovelaping

    How to show local html file into webview?

    How to make pixel perfect font in css?

    css How can I make the page body stay the same size even if I add element to it?

    JavaFX how to apply CSS theme

    How to calculate the length in pixels of a string with php - from another page on my website

    How to go about making an image move up in the div on hover

    How I can get an Image height and divide it by 2 using Jquery

    How to make 3-Column layout with fluid center (fully utilize space), and variable-length on sidebars

    Why does first slideshow image click skip transition and go straight to image?

    How to create a mouseover effect on menu links EXCEPT for the current page?

    How does localStorage act in Javascript? [closed]

    How to add dynamic CSS source urls in Squishit?

    Inline blocks somehow don't get displayed in a straight line [duplicate]