Форум

torsar · #1 (**permalink**) 08.09.2017, 08:05

Есть такой html:

<div class="cards" >
        <div class="slide">menu</div>
        <input type="checkbox" id="toggle">
</div>

Нужно при нажатии на чекбокс, чтобы к корневому div'у (у которого class==cards) применялся css.

Код:

input[type=checkbox]:checked selector {
                   color: red;

}

Можно ли такое, подскажите какой селектор?

ksa · #2 (**permalink**) 08.09.2017, 08:23

Сообщение от torsar

Можно ли такое

Нет.

Селекторы работают только "вниз"...

рони · #3 (**permalink**) 08.09.2017, 08:38

torsar,
input заменить на label и перенести в строку ноль

torsar · #4 (**permalink**) 08.09.2017, 08:48

Сообщение от рони

torsar,
input заменить на label и перенести в строку ноль

Собсна так и сделал

Жалко, что нету такого хитрого селектора

рони · #5 (**permalink**) 08.09.2017, 08:56

torsar,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
input[type=checkbox]:checked + .cards {
  color: red;
}
#toggle{
      display: none;
   }
input[type=checkbox]:checked + .cards label:before {
	content: "\2713";
    color: #008000;
     padding:1px 3px;
}

[for="toggle"]:before  { border-radius: 3px;
     padding: 1px 8px;
    content: " ";
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
	font-size: 15px;
     border: 2px solid #696969;
	text-align: center;
    line-height: 15px;
  }

  </style>

</head>

<body>

<input type="checkbox" id="toggle">
<div class="cards" >
        <div class="slide">menu</div>
        <label for="toggle"></label>
</div>


</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript