Horay Horay - 6 months ago 11
CSS Question

If all elements don't have a particular class, then apply applies

I have a list of elements with the class name of

.box
. Sometimes, an element will have an extra class, but I will not know which element has it.

Is there a way to check if all elements of
.box
don't have
.extraClass
, then apply styles to
.box
, but if any elements of
.box
has the class
.extraClass
, then don't apply the css style?

I want to do it using css only.

JSFiddle





var toggleClass = document.getElementById('toggleClass'),
box = document.getElementsByClassName('box'),
randomNumber = -1;

toggleClass.addEventListener('click', function() {
if (randomNumber !== -1) box[randomNumber].classList.remove('extraClass');
randomNumber = Math.floor(Math.random() * 9);
box[randomNumber].classList.toggle('extraClass');
});
removeClass.addEventListener('click', function() {
if (randomNumber !== -1) box[randomNumber].classList.remove('extraClass');
});

#wrapper {
padding: 0;
margin: 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.box {
background-color: yellow;
width: 100px;
height: 100px;
border: 1px solid;
list-style-type: none;
}
/*If all of '.box' DOES'T have the class '.extraClass`; make background of '.box' pink*/

.box {
background-color: pink;
}
.extraClass {
background-color: red;
}

<ul id="wrapper">
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
</ul>

<button id="toggleClass">Toggle Class</button>

<button id="removeClass">Remove Class</button>




Answer

Sounds like you should use a third CSS class that you also add to the parent when you add .extraClass-- using just those two could get cumbersome. As an example, here's some sample styling that you could use:

#wrapper:not(.disableStyling) .box {
  background: red;
}

This way, whenever you add that .extraClass to a box, you also add the .disableStyling class to the wrapper. It might make it a bit easier to follow

EDIT:

Here's the js segment you need to change:

var toggleClass = document.getElementById('toggleClass'),
  box = document.getElementsByClassName('box'),
  wrapper = document.getElementById('wrapper'),
  randomNumber = -1;

toggleClass.addEventListener('click', function() {
  if (randomNumber !== -1) box[randomNumber].classList.remove('extraClass');
  randomNumber = Math.floor(Math.random() * 9);
  box[randomNumber].classList.toggle('extraClass');
  var boxes = document.getElementsByClassName("box");
  var disabled = false;

  for (var i = 0; i < boxes.length; i++)
    if (boxes[i].classList.contains("extraClass")) disabled = true;
  if (disabled)
    wrapper.classList.add("disableStyling");
  else
    wrapper.classList.remove("disableStyling");
});
removeClass.addEventListener('click', function() {
  if (randomNumber !== -1) {
    box[randomNumber].classList.remove('extraClass');
    wrapper.classList.toggle('disableStyling');
  }
});