Как с помощью псевдокласса :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 шт):
Есть еще
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>