MozillaZine

css selector question

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
Bethrezen
 
Posts: 390
Joined: September 13th, 2003, 11:56 am

Post Posted January 31st, 2016, 10:34 am

Hi all

Quick question when I do this

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>

<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

User avatar
 
Posts: 2134
Joined: May 5th, 2004, 10:40 am
Location: Belgium

Post Posted 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).
Intelligent alien life does exist, otherwise they would have contacted us.

Return to Web Development / Standards Evangelism


Who is online

Users browsing this forum: No registered users and 2 guests