CODEWITHSUNDEEP
htmlcsscss-selectors
Horay
Horay

Reputation: 1408

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

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>

Upvotes: 1

Views: 116

Answers (2)

JackHasaKeyboard
JackHasaKeyboard

Reputation: 1665

Vanilla CSS doesn't quite have logical operations like that... You'll need to use JavaScript unless you want to logically work out some kind of static solution.

Here a solution with jQuery: https://jsfiddle.net/d748Lxx7/

Note the !, that inverses it (otherwise it would look be looking to return true).

Upvotes: 1

Jay
Jay

Reputation: 1056

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');
  }
});

Upvotes: 1

Related Questions