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

by Vladymyr Shevchuk

HTML

<link rel="stylesheet" href="https://rawgit.com/dosandk/5174ebcf3219dcf3e48a/raw/67c39a3a1a7cc1b318298d022f5f5f038a6a1a75/default.css">
<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>
        
        <input id="answer-right" class="css-checkbox" name="votingButton" type="radio" />
        <div class="table-cell parent-half-width right-side answer-wrapper">
            <div class="table parent-size">
                <div class="table-cell vertical-align-middle to-left-inline">
                    <label for="answer-right" class="answer">
                        <div class="table-cell vertical-align-middle to-center-inline button-wrap">
                            <span class="button">&nbsp;</span>
                        </div>      
                        <div class="table-cell vertical-align-middle to-left-inline text-container">
                            Right side text
                        </div>

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

CSS

.main-container {
    width: 600px;
    height: 60px;
    color: #fff;
    font-size: 14px;
}
.left-side, 
.right-side {
    background: #212121;
}
.left-side {
    border-right: 4px solid grey;
}
.right-side {
    border-left: 4px solid grey;
}
.button-wrap {
    padding: 0 20px;
}
.button {
    width: 16px;
    height: 16px;
    display: inline-block;
    cursor: pointer;
    border: 3px solid #cfcfcf;
}
.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;
}
.answer {
    outline: 1px solid red;
    display: inline-block;
}