0

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>
Chocoprins18
  • 115
  • 2
  • 11
  • do you have access to the javascript? add the class to the container instead of to the image. – Carol McKay Oct 17 '18 at 02:40
  • @CarolMcKay No that is very hardcoded for me. Might break the site. – Chocoprins18 Oct 17 '18 at 02:40
  • You looking for parent select but still not available in any CSS specification. So try to add expected class on image container. – Hanif Oct 17 '18 at 02:50
  • Unfortunately with your current constraints this is impossible. CSS does not yet have a parent selector. In the future, you would want to use the `:has()` pseudo selector. https://developer.mozilla.org/en-US/docs/Web/CSS/:has Unfortunately that selector has no browser support yet. – Josiah Oct 17 '18 at 03:01
  • @Josiah - and according to the selectors 4 spec, no browser ever will. See [2.1. Live vs Snapshot Selector Profiles](https://drafts.csswg.org/selectors/#profiles). The `:has()` pseudo selector is only for the snapshot profile (essentially, for JS) whereas CSS will use the live profile, which excludes `:has()` – Alohci Oct 17 '18 at 03:08
  • @Josiah Hmm so what is the best and easiest approach here as I don't have much understanding with JavaScript – Chocoprins18 Oct 17 '18 at 03:09
  • 1
    @Chocoprins18 - By far the easiest way is to change the JS that adds the 'selected' class to the img so that it adds a class to the container at the same time. If you can't do that, you'll need to use a MutationObserver in the manner of [this answer](https://stackoverflow.com/questions/52834774/dom-event-when-element-is-removed#52834898) – Alohci Oct 17 '18 at 03:28

2 Answers2

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>
Adam Chubbuck
  • 1,612
  • 10
  • 27
  • Sorry. I thought this worked but no. Did not worked from my side. I need a perfect solution as there is actually 2 more divs between img. I will edit my question. Sorry! – Chocoprins18 Oct 17 '18 at 03:10
  • @Chocoprins18 As you can see from the above, the number of `div` tags in-between does not matter. – Adam Chubbuck Oct 18 '18 at 13:42
-1

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;
}
Jordan
  • 176
  • 10