3

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

<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

7

Разве, что так (способа, чтобы влиять на 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 you have read our privacy policy.

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