CSS and modifying div's width if radio button checked - html

Question

JavaScript not accepted this time.
So, I have this CSS code. This code should change to width if radio button is checked. Nothing happens. How could I modify the code?
input[type="radio"]#someID-1:checked #extra { width: 4000px; }
I also have this HTML code:
<div id="kaaviotaulukko" style="white-space: nowrap; position: relative; text-align: center;">
<div style="display: inline-block">
<div style="DISPLAY:INLINE-BLOCK">
<input id="someID-1" name="nappi" type="radio">
<div class="listaus-sisalto" style="float:left;width:0">
<div id="navi3">
<div style="z-index:100;position:fixed;right:0;top:300px">
<span><label for="someID-1">1</label></span>
</div>
</div>
</div>
<div class="kierros" style="display: inline-block;width:350px">
R1
</div>
</div>
<div style="DISPLAY:INLINE-BLOCK">
<input id="someID-5" name="nappi" type="radio">
<div class="listaus-sisalto" style="float:right;width:0">
<div id="navi5"></div>
</div>
<div class="kierros" id="extra" style="display: inline-block;width:70px">
extra
</div>
</div>
<input id="someID-100" name="nappi" type="radio">
<div class="listaus-sisalto" style="float:right;width:0">
<div id="navi100"></div>
</div>
<div style="z-index:99;width:70px;position:fixed;left:0;top:100px;margin:auto;background-color:red">
<br>
</div>
<div style="z-index:99;width:70px;position:fixed;right:0;top:100px;margin:auto;background-color:red">
<br>
</div>
</div>
</div>

Answer 1

There is no child #extra of that input. Just remove that from the selector.
input[type="radio"]#someID-1:checked {
width: 4000px;
}
<div id="kaaviotaulukko" style="white-space: nowrap; position: relative; text-align: center;">
<div style="display: inline-block">
<!--
-->
<DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="nappi" type="radio" id="someID-1" />
<div class="listaus-sisalto" style="float:left;width:0">
<div id="navi3">
<div style="z-index:100;position:fixed;right:0;top:300px"><span><label for="someID-1">1</label></span></div>
</div>
</div>
<div class="kierros" style="display: inline-block;vertical-align:top;width:350px">R1
</div>
</DIV>
<!--
-->
<DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="nappi" type="radio" id="someID-5" />
<div class="listaus-sisalto" style="float:right;width:0">
<div id="navi5">
</div>
</div>
<div class="kierros" style="display: inline-block;vertical-align:top;width:70px" id="extra">extra
</div>
</DIV>
<!--
--><input name="nappi" type="radio" id="someID-100" />
<div class="listaus-sisalto" style="float:right;width:0">
<div id="navi100">
</div>
</div>
<!--
-->
<div style="z-index:99;width:70px;position:fixed;left:0;top:100px;margin:auto;background-color:red"><br />
</div>
<div style="z-index:99;width:70px;position:fixed;right:0;top:100px;margin:auto;background-color:red"><br />
</div>
</div>
</div>

Answer 2

The selector input[type="radio"]#someID-1:checked #extra selects an element with the id extra that is a child element of your radio button. Since radio buttons rarely have children, you'll need to change the selector to match your HTML structure.
I suggest placing the radio button inside the same parent element as #extra. That way you can use the selector input[type="radio"]#someID-1:checked ~ #extra which will target the #extra element if it is preceded by the radio button in selected state.

Answer 3

A simplified version of what you'd like to become.
#radiodiv {
background: red;
}
#radio:checked + #radiodiv {
width: 400px;
}
<input id="radio" type="radio" />
<div id="radiodiv">
<p>This is the div</p>
</div>