is it possible to activate a div when clicked without javascript?

Question

Just wondering if a div can be called without using javascript.

such as

my_div:hover{ add new layout}

is there a version for click eg

my_div:click{add new layout}

Thanks

Nope, but you can go the other way. You might also be interested in something like: https://github.com/krasimir/cssx — jmargolisvt, Dec 04 '17 at 15:31

score 3 · Accepted Answer · answered Dec 04 '17 at 15:33

Yes, if you add tabindex="0" to your div, you make it clickable and can then use the :focus pseudo-class to apply styles.

<div class="clickable" tabindex="0"></div>

.clickable {
  height: 100px;
  background: blue;
}

.clickable:focus {
  background: red;
}

Codepen example. Clicking the div should give it focus and apply the :focus CSS to it. Clicking away from it will unfocus (blur) it and reset the default styles.

score 0 · Answer 2 · answered Dec 04 '17 at 15:31

Not directly, but you can fake it using checkboxes:

input[type=checkbox] {
  display: none;
}
.content {
  display: none;
  padding: 20px;
  background-color: #dadada;
}
input[type=checkbox]:checked+label+.content {
  display: block;
}

<input type="checkbox" id="check">
<label for="check">Click me</label>
<div class="content">
  <h3>Content</h3>
  <p>lorem20</p>
</div>

is it possible to activate a div when clicked without javascript?

2 Answers2