Html CSS和修改div'；如果选中单选按钮，则为s宽度

这次不接受JavaScript

所以，我有这个CSS代码。如果选中单选按钮，此代码应更改为宽度。什么也没发生。如何修改代码

input[type="radio"]#someID-1:checked #extra { width: 4000px; }

我还有以下HTML代码：

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

1.
R1
额外的




该输入没有子
#额外的
。只需将其从选择器中移除


input[type=“radio”]#someID-1:已选中{
宽度：4000px；
}

1.
R1
额外的




选择器
输入[type=“radio”]#someID-1：选中#extra
选择id为
extra
的元素，该元素是单选按钮的子元素。由于单选按钮很少有子按钮，因此需要更改选择器以匹配HTML结构

我建议将单选按钮放置在与
#extra
相同的父元素中。通过这种方式，您可以使用选择器
输入[type=“radio”]#someID-1:checked#extra
，如果在选中状态下前面有单选按钮，则该选择器将指向
#extra
元素。
您希望成为的简化版本


#radiodiv{
背景：红色；
}
#收音机：选中+#radiodiv{
宽度：400px；
}

这是分区

应修改id为“额外”的div。它的宽度应该是4000px。谢谢。有没有办法保持我的HTML结构不变并完成这项工作？不幸的是，没有JavaScript不行。CSS目前没有从更深层次的嵌套返回的方法，您需要上升一个层次才能达到
#extra
。