2

Допустим у нас есть следующая структура:

<div class="parent">
   <div class="child></div>
</div>

Каким образом через CSS можно обратиться к родителькому блоку? Например при событии :hover на .child, менялся фон у родительского блока .parent. И вообще возможно ли это?

2
  • Тоже задавался этим вопросом и пришел к тому, что нет. Можно реализовать на js 1 сен 2017 в 13:39
  • Можно наоборот обратиться от родителя к дочернему: .parent { height: 500px; width: 200px; margin: 0 auto; border: 2px solid; } .child { margin-top: 100px; height: 80px; width: 80px; } .parent:hover .child { background-color: red; } 17 апр 2019 в 4:06

5 ответов 5

6

Разве, что так (способа, чтобы влиять на parent через child в css отсутствует)

.parent{
    width: 100px;
    height: 100px;
    position: relative;
    border: 1px solid #ccc;
}
.child{
    width: 50px;
    height: 50px;    
    background: #ccc;
}
.child:before{
    content: '';
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: tomato;
    opacity: 0;
    z-index: -1;
    transition: opacity .3s;
}
.child:hover:before{
    opacity: 1;
}
<div class="parent">
parent
   <div class="child">child</div>
</div>

8
  • Здесь нет обращения в родителю через чайлда. А просто костыль. 1 сен 2017 в 13:51
  • 3
    @Sergey Novikov - способа, чтобы влиять на parent через child в css нет
    – soledar10
    1 сен 2017 в 13:53
  • я выше это и написал. Он написал Например меняется фон, так что ваш костыль подходит только для этого. 1 сен 2017 в 13:56
  • 2
    @Sergey Novikov я и написал данный костыль исходя из условия вопроса
    – soledar10
    1 сен 2017 в 13:57
  • 1
    Думаю, в вопросе все же нужно было универсальное решение (если бы оно было), а пример с фоном - лишь для уточнения
    – Cheg
    1 сен 2017 в 14:34
2

Не знаю способа сделать это через CSS, но вот удобный вариант через JQuery. Там можно использовать parent():

$(".child").hover(
  function(){
    $(this).parent().addClass("green")
  },
  function(){
    $(this).parent().removeClass("green")
  }
);
1
  • о jquery речи не было
    – Cheg
    1 сен 2017 в 14:32
0

Это вроде только планируется реализовать в CSS4. А в CSS3 такой возможности нет.

-1

В CSS3, через потомка, к родительскому элементу, обратиться невозможно.

И да...

.hello > .world {
  top: 0;
}

обращение, через потомка, к родительскому элементу в CSS

-1

Возможно, но только не совсем так как вы этого ожидали. В современном CSS есть псевдо класс :has(), при его помощи можно решить вашу задачу. Сам :has() проверяет, имеет ли тот или иной селектор, совпадающий селектор записываемый в :has(), если имеет, только самому элементу применяются стили. Пример:

header:has(h1) {
  background-color: red;
}

В данном примере идёт такая проверка: если у элемента, совпадающего с селектором header, имеется ребёнок (элемент) совпадающий с селектором h1, то тогда к элементу совпадающего с header, применяем красный фон. (Проще говоря, если у header есть h1, применяем красный фон к header)

К сожалению :has() появился в браузерах довольно поздно и у него плохая (мягко говоря) совместимость со старыми браузерами, а на Firefox (с 103 версии) так и вообще нужно включать специальную опцию в конфигурации браузера (нужно зайти в about:config, в поиске написать layout.css.has-selector.enabled и переключить значение на true). В остальных браузерах ничего включать не нужно и всё работает из коробки (Если у вас конечно достаточно свежая версия).

Вот само решение:

.parent {
  width: 100px;
  height: 100px;

  background-color: red;
}

.parent:has(.child:hover) {
  background-color: blue;
}
<div class="parent">
   <div class="child"></div>
</div>

Если же вы хотите, проверять не все .child на :hover, а только дочерние, то соответственно пишите так:

.parent {
  width: 100px;
  height: 100px;

  background-color: red;
}

.parent:has(> .child:hover) {
  background-color: blue;
}
<div class="parent">
   <div class="child"></div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.