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