Как с помощью псевдокласса :checked изменить стиль другого класса

Есть input чекбокс

<input type="<?php echo esc_attr($type == 'tabs_radio' ? "radio" : "checkbox") ?>" <?php checked($checked) ?> name="woof_section_tabs" class="input-rst-btn" id="woof_tab_<?php echo esc_attr($key . "_" . $id); ?>">

На выходе имеет вид:

<input type="checkbox" name="woof_section_tabs" class="input-rst-btn" id="woof_tab_pa_product-category_67793e016ad43">

И есть к нему label

<label class="woof_section_tab_label" for="woof_tab_pa_product-category_67793e016ad43" id="woof_pa_product-category_67793e016ad43_content">

При клике на чекбокс, его label можно стилизировать как cheked и это срабатывает:

.woof_redraw_zone input[name="woof_section_tabs"]:checked + label.woof_section_tab_label {
    position: absolute;
    top: 75px;
    right: 0;
    z-index: 21;
}

Есть еще div (перед input, родитель один), которому нужно менять стили когда input[name="woof_section_tabs"]:checked, прописываю

.woof_redraw_zone input[name="woof_section_tabs"]:checked + .rst-btn (класс DIVa) {
    position: absolute;
    top: 75px;
    right: 0;
    z-index: 21;
}

Сам блок

<div class="woof_submit_search_form_container rst-btn" id="rst-btn"><a href="/" class="rst-butt"><div class="reset-in-filter" data-link="">Текст</div></a></div>

И это никак не работает, так же пробовал через js

var obj1 = document.getElementsByClassName('woof_section_tab_label');
if (getComputedStyle(obj1).position == 'absolute') {
document.getElementsByClassName('woof_submit_search_form_container').style.position = 'absolute';
}

Т.е. Получается мне блоку div когда input:cheked нужно присвоить position:absolute, с самим label это работает без проблем. К диву не хочет. Просьба помочь с решением, подойдет как css так и скриптом.


Ответы (1 шт):

Автор решения: ksa

Есть еще div (перед input, родитель один), которому нужно менять стили когда input[name="woof_section_tabs"]:checked

Желательно делать простые тестовые примеры для своих ситуаций... ;)

main:has(:checked) {
  & div {
    border: 1px solid;
  }
  & label {
    color: green;
  }
}
<main>
  <div>ДИВ</div>
  <input type='checkbox' id='test' />
  <label for='test'>label</label>
</main>

→ Ссылка