当在另一个类中添加一个类时，在容器类上添加CSS，反之亦然

Question

This is a HTML example of my website. I want to change CSS when some class is added on a container with an img in it. In this situation, a class is been added onclick to the img. How can I add CSS when a class is added and a class is removed. See the examples below. I see some tutorials with javascript but can this also been done with just CSS?

 .container //when image is unselected{ border: 2px dotted; } .container //when image is selected{ border: 2px solid; } 

 //When image is unselected <div class="container"> <div class="checkbox"> <div class="value"> <img class="some-image"> </div> </div> </div> //When image is selected <div class="container"> <div class="checkbox"> <div class="value"> <img class="some-image selected"> </div> </div> </div> 

Answer 1

Yes, this is possible using only CSS. The key here is to use the contenteditable global attribute and :target pseudo class , as demonstrated below.

 .container { display: inline-block; } .container:focus { outline: none; } .container:focus img { border: 2px dotted; } .container img { border: 2px solid; } 

 <div> <div class="container" contenteditable> <div class="checkbox"> <div class="value"> <img class="some-image" src="https://via.placeholder.com/100x100"> </div> </div> </div> <div class="container" contenteditable> <div class="checkbox"> <div class="value"> <img class="some-image" src="https://via.placeholder.com/100x100"> </div> </div> </div> </div> 

Answer 2

This is a something that is very simple to accomplish in JavaScript. JS allows you to write a lot of event driven code. Here is an example of what you are trying to do in JS.

Link

If you are looking for a pure css solution the closest thing you will get is this:

.container {
  border: 2px dotted;
}

.container:active {
  border: 2px solid;
}