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

Question

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

likely duplicate http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — CRABOLO, Jul 05 '14 at 21:29
I don't want to select parent element like in http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector. I want change property of parent element by clicking on his child without js. I think, this is two different questions. — Vladimir Shevchuk, Jul 05 '14 at 21:39
I understand, it's very easy to resolve this problem by using js or jquery. But I want find some css-trick which will allow me to do this. — Vladimir Shevchuk, Jul 05 '14 at 21:48
@dosandk There is NO way of doing this with CSS. Firstly as has been stated you cannot **affect** a parent element from a child in the way you are suggesting. Secondly, **click** functions are, primarily the province of Javascript. — Paulie_D, Jul 06 '14 at 08:30
@Paulie_D After few days of experimentation, I think, I found the way to do this (to change background of parent element .left-side or another css-property by clicking on his children .button or .text without js ). If it's interesting i can share my solution. — Vladimir Shevchuk, Jul 06 '14 at 09:49

Vladimir Shevchuk · Accepted Answer · 2014-07-07T18:11:35.660

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

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

1 Answers1