How to add cursor to parent element and apply that to child elements too using css?

Question

i want to apply cursor: not-allowed to parent element and this should apply to the child elements as well.

What i am trying to do? i have the parent div element with class "card" and cursor pointer and child elements with cursor pointer. now when the parent div element is with classes "card" and "disabled" now i want the parent div element and child elements to have the cursor:not-allowed.

Below is my html code,

<div class="card disabled">
    <a href="some">
        <div class="image">
            <img/>
        </div>
    </a>

    <a href="some">
        <button class="icon">
            <svg />
        </button>
    </a>

    <div class="footer">
        <div class="info">
            <a href="somewhere">
                <h4>text</h4>
             </a>
         </div>
         <button>
             <svg/>
         </button>
         <div class="more">
             <div class="container">
                 <button></button>
             </div>
         </div>
     </div>
 </div>

Below is the css,

.card {
     .icon {
         cursor: pointer;
     }
     .image {
         cursor: pointer;
     }
     .footer {
         svg {
             cursor: pointer;
         }
     }
 }

Now i have applied some style like below to make the cursor: not-allowed when parent div has classes card and disabled

.card.disabled {
    cursor: not-allowed;
}

This doesnt work. could someone help me with this. thanks.

Answer 1

Try this :

.card, 
.card * {
     cursor: pointer;
}

.card.disabled,
.card.disabled * {
    cursor: not-allowed;
}