Обращение к родительскому элементу CSS

355

03 сентября 2017, 00:55

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

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

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

Answer 1

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

Answer 2

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

$(".child").hover(
  function(){
    $(this).parent().addClass("green")
  },
  function(){
    $(this).parent().removeClass("green")
  }
);

Answer 3

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

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Не могу сделать редирект на другую страницу.

Есть таблица с записями, по нажатию на запись должна открываться новая страница с возможностью редактирования

277

IntelliSense при написании разметки

Когда пишу разметку в visual studio в приложениях на wpf, то заметил, что нет автодополнения в тех случаях когда пишу свойства, например здесь

307

масштабируемость GridView

Добрый день,

293

$if \ else vs. switch \ case в C#$

if \ else vs. switch \ case в C#

Что лучше использовать: if\else или switch\case?

454