CODEWITHSUNDEEP
css
user8782879
user8782879

Reputation:

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

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

Upvotes: 0

Views: 415

Answers (2)

delinear
delinear

Reputation: 2795

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.

Upvotes: 4

Jonas Grumann
Jonas Grumann

Reputation: 10786

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>

Upvotes: 0

Related Questions