Overriding cursor value from parent to child elements

Question

I am stuck in between with this and can't figure out whats wrong.

There are multiple menus which are divs having some value defined. Some menu items are disabled/non-clickable and some are. I am differentiating between them by using cursor property.

If disabled, I set it to cursor:default and if enabled, I set it to cursor:pointer using classes.

Now, if any of the menu is clicked, It has to wait for a certain amount of time to load the page. In that time, I want the whole menu container to have cursor as loading. So I added cursor:wait to parent. Unfortunaltely, it is not working.

I also tried using !important but no luck.

Any help would be appreciated, Thanks.

setTimeout(function() {
  var el = document.getElementById("main");
  el.className += ' cursor-wait';
  alert(el.className);
}, 4000);

.container,
.container div {
  border: 1px solid black;
}
.cursor-default {
  cursor: default;
}
.cursor-point {
  cursor: pointer;
}
.container.cursor-wait {
  cursor: wait !important;
}

<div id="main" class="container">
  <div class="cursor-point">Menu1</div>
  <div class="cursor-default">Menu2</div>
  <div class="cursor-point">Menu3</div>
  <div class="cursor-default">Menu4</div>
  <div class="cursor-point">Menu5</div>
  <div class="cursor-point">Menu6</div>
  <div class="cursor-default">Menu7</div>
  <div class="cursor-point">Menu8</div>
  <div class="cursor-default">Menu9</div>
</div>

Answer 1

Your CSS reads:

.container .cursor-wait {
  cursor:wait !important;
}

Which is looking for an element called .cursor-wait inside of your .container to style.

Since you're adding both classes on the same element, you need to remove the space. Additionally, you want to override the cursor on elements where you've already set a cursor - not on the parent:

.container.cursor-wait div {
  cursor:wait !important;
}

---

Edit: Per your comment:

can I have something in CSS that applies to all child elements, not just divs inside container

You can modify your code like such with a wildcard selector (asterisk):

.cursor-wait * {
  cursor:wait !important;
}

setTimeout(function() {
  var el = document.getElementById("main");
  el.className += ' cursor-wait';
  alert(el.className);
}, 4000);

.container,
.container div {
  border: 1px solid black;
}
.cursor-default {
  cursor: default;
}
.cursor-point {
  cursor: pointer;
}
.cursor-wait * {
  cursor: wait !important;
}

<div id="main" class="container">
  <div class="cursor-point">Menu1</div>
  <div class="cursor-default">Menu2</div>
  <div class="cursor-point">Menu3</div>
  <div class="cursor-default">Menu4</div>
  <div class="cursor-point">Menu5</div>
  <div class="cursor-point">Menu6</div>
  <div class="cursor-default">Menu7</div>
  <div class="cursor-point">Menu8</div>
  <div class="cursor-default">Menu9</div>
</div>