Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Подскажите селектор (https://javascript.ru/forum/xhtml-html-css/70482-podskazhite-selektor.html)

torsar 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 08.09.2017 08:23
Цитата:
Сообщение от torsar
Можно ли такое
Нет. :no:
Селекторы работают только "вниз"...

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

torsar 08.09.2017 08:48
Цитата:
Сообщение от рони (Сообщение 464030)
torsar,
input заменить на label и перенести в строку ноль
Собсна так и сделал :)
Жалко, что нету такого хитрого селектора :(

рони 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>


Часовой пояс GMT +3, время: 23:10.