css selector question

Bethrezen · Post by **Bethrezen** » January 31st, 2016, 10:34 am

Hi all

Quick question when I do this

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>

div
{
padding:100px;
background-color:green
}

input#red:checked ~ div#test {background-color:red}
input#blue:checked ~ div#test {background-color:blue}

</style>
</head>
<body>

<input type="radio" name="button" id="red">
<label>red</label>

<input type="radio" name="button" id="blue">
<label>blue</label>

<div id="test"></div>

</body>
</html>

Everything works as expected and when the radio button is checked the background colour changes accordingly

However when I do

Code: Select all

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>

div
{
padding:100px;
background-color:green
}

input#red:checked ~ div#test {background-color:red}
input#blue:checked ~ div#test {background-color:blue}

</style>
</head>
<body>

<div id=”controls”>
<input type="radio" name="button" id="red">
<label>red</label>

<input type="radio" name="button" id="blue">
<label>blue</label>
</div>

<div id="test"></div>

</body>
</html>

The whole thing brakes, now if I’m understanding this right the reason it brakes is because the inputs no longer share the same parent so my question is how do I modify the selector to select elements that don’t share the same parent or is what I'm trying to do not possible ?

Frenzie · Post by **Frenzie** » January 31st, 2016, 11:03 am

You cannot select parent elements through CSS. You'd have to use Javascript or stick with a variant of the first option (which I'd say is probably the preferred solution).

css selector question

css selector question

Re: css selector question