CSS input :checked hack

Question

in the below code is this possible to change the color of deep linking div through input checkbox hack

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>
<style>
  .checkclick:checked .hello {
    color: blue;
  }
</style>

<body>
<div>
  <input type="checkbox" id="check" class="checkclick" />
  <span>Hello One next</span>
</div>
<div class="one">
  <div class="two">
    <div class="hello">hello world</div>
  </div>
</div>
  </body>

</html>

Maybe `.checkclick:checked + .one .hello` but I'm not sure if that is what you mean — Alon Eitan, Feb 10 '20 at 12:27
@AlonEitan if there is code like this ```
Hello One next

hello world

``` — Kapil, Feb 10 '20 at 12:31
@Kapil with the structure in your comment it is not possible in pure CSS (JS can do it though), you would have to remove the `div` wrapping your checkbox. Though you can use labels with `for="ckeckbox-name"` to trigger your checkbox and place the checkbox anywhere on the site. — AlexG, Feb 10 '20 at 12:35
Note: the `` and `` tags do not use and do not need a closing slash and never have in HTML. — Rob, Feb 10 '20 at 12:37

score 3 · Answer 1 · answered Feb 10 '20 at 12:27

Yes it is, you can either use the element+element selector or the sibling selector.

Example with the the element+element Selector .checkclick:checked + .one .hello, try it out:

.checkclick:checked+.one .hello {
  color: blue;
}

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <input type="checkbox" id="check" class="checkclick" />
  <div class="one">
    <div class="two">
      <div class="hello">hello world</div>
    </div>
  </div>
</body>

</html>

score 2 · Answer 2 · answered Feb 10 '20 at 12:28

I think this is what you want:

input[type=checkbox]:checked + .one .two  .hello {
  color: blue;
}

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="checkbox" id="check" class="checkclick" />
    <div class="one">
      <div class="two">
        <div class="hello">hello world</div>
      </div>
    </div>
  </body>
</html>

score 1 · Answer 3 · answered Feb 11 '20 at 08:16

Not to change the structure and answer TS comment

can you help me with javascript how it will work

Javascript version

document.getElementById("check").onchange = function() {
  const element = document.getElementById("hello_id");
  element.classList.toggle("blue");
}

.blue {
  color: blue;
}

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <div>
    <input type="checkbox" id="check" class="checkclick" />
    <span>Hello One next</span>
  </div>
  <div class="one">
    <div class="two">
      <div class="hello" id="hello_id">hello world</div>
    </div>
  </div>
</body>

</html>

JQuery version

$("#check").change(function() {
  $("#hello_id").toggleClass("blue");
});

.blue {
  color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <div>
    <input type="checkbox" id="check" class="checkclick" />
    <span>Hello One next</span>
  </div>
  <div class="one">
    <div class="two">
      <div class="hello" id="hello_id">hello world</div>
    </div>
  </div>
</body>

</html>

CSS input :checked hack

3 Answers3