<div class="first-div"> <div> </div> </div>

div is in the external <div class="first-div"> , like when you click on <div class="first-div"> change the style of the internal div , and when it is pressed again, roll back. Preferably using only css.

    4 answers 4

    In CSS3, a click can be processed thanks to this “crutch” with a checkbox:

     .first-div { width: 180px; height: 180px; border: 1px solid black; position: relative; } label { position: absolute; width: 100%; height: 100%; } input { display: none; } .first-div > div { width: 50px; height: 50px; border: 1px solid red; margin: 20px; } input:checked ~ div { border-color: green; } 
     <div class="first-div"> <label for="toggle"></label> <input type="checkbox" id="toggle"> <div> </div> </div>

    That is, you create a checkbox and hide it. Create a label for this checkbox and use positioning to place a label on the entire external block. It turns out that you seem to click on the block, but in fact on the label. And the checkbox changes its activity.

    And you already have the styles of the indoor unit depending on whether the checkbox is active or not.

    • one
      Thank. An interesting decision. - Pavel Kushnerevich
    • With the help of such a thing (though not a checkbox, but a radio button), you can do, for example, a photo gallery on pure css, without any js - humster_spb
    • 2
      @humster_spb and at the same time do not care about the semantics, accessibility and write hard supported code) - Sasha Omelchenko
    • @SashaOmelchenko, what is wrong with semantics and accessibility? - humster_spb
    • one
      @humster_spb radiobutton, label and other elements are elements for forms, not for photo galleries. - Sasha Omelchenko

    You can set the color in .first-div through color (eg color: red), and in the child use the variable current-color (background: currentColor), here's an example - https://codepen.io/anon/pen/zpLRar

     .first-div { color: yellow; } .first-div div { background: currentColor; } .first-div p { color: black; } .first-div:active { color: red; } 
     <div class="first-div"> <div> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel aperiam illo fugiat inventore nostrum eligendi incidunt, velit doloribus corporis praesentium assumenda, harum ea quisquam accusamus soluta sit nesciunt sequi. Suscipit. </p> </div> </div>

    Also, if you need exactly toggle behavior, then instead of a div, use the label and checkbox with it:

     #myCheckbox { display: none; } #myCheckbox:checked + .first-div { color: red; } 
     <input type="checkbox" id="myCheckbox" /> <label for="myCheckbox" class="first-div"> <!-- your code --> </label>

    • one
      However, this is not exactly what the author asked, “but with one more click to roll back” - in your example, it is not pressing that works, but clamping - Peresada
    • then you can use: focus, or you can use label + checkbox instead of div - Denis Sedchenko

    On pure css, I do not see a way how this can be implemented (when hovering is easy, but when I press it already xs)

    But you can do it with a simple line on jquery: When you click on the div, its child div is either given a new red class, or is removed if it already exists

     <div class="first-div" onclick="$('.first-div > div').toggleClass('red');"> <div> </div> </div>

      Option on css using pseudo-class :target

       * { padding: 0; margin: 0; box-sizing: border-box; } #parent { border: 2px solid #00f; position: relative; width: 150px; height: 150px; margin: 15px auto; } #parent a[href="#parent"], #parent a[href="#parentHidden"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 0; } #parent a[href="#parent"] { display: block; color: #555; } #parent a[href="#parentHidden"] { display: none; } #parent .childDiv { line-height: 150px; text-align: center; } #parent .childDiv:before { content: '✔'; position: absolute; top: 0; right: 0; width: 20px; height: 20px; line-height: 20px; background: green; color: #fff; opacity: 0; } #parent:target a[href="#parent"] { display: none; } #parent:target a[href="#parentHidden"] { display: block; } #parent:target .childDiv { display: block; color: #f00; } #parent:target .childDiv:before { opacity: 1; } 
       <div id="parent"> <a href="#parent" tabindex="1">label</a> <a href="#parentHidden" tabindex="1">label hidden</a> <div class="childDiv">Child</div> </div>