CODEWITHSUNDEEP
htmlcsssasscss-selectorsscss-mixins
makg0619
makg0619

Reputation: 11

All child disabled css is coming from .grand-parent class and but need to override disabled childs css based on override-grand-parent class

I element level some disabled CSS is coming from grand parent but i want to override disabled CSS which is coming from grand parent based on a class called override-grand-parent.

    .grand-parent {
        input {
            pointer-events: none;
            background-color: #ddd7d7;
            border: 1px solid #ddd7d7;
        }
        button {
            pointer-events: none;
            background-color: #666666;
            border: 1px solid #666666;
            color: #fff;
        }
        
        form {
            margin-top: 10px;
            pointer-events: none;
            background-color: #5680dd;
        }
        
    }
<div class="grand-parent">
  <div>
    <div class="override-grand-parent">
        <input type="text" />
        <button>click me</button>
        <form>
          <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
          <label for="html">HTML 1</label><br>
          <input type="radio" id="html" name="fav_language" value="HTML">
          <label for="html">HTML</label><br>
          <input type="radio" id="css" name="fav_language" value="CSS">
          <label for="css">CSS</label><br>
          <input type="radio" id="javascript" name="fav_language" value="JavaScript">
          <label for="javascript">JavaScript</label>
        </form>
    </div>
  </div>
</div>

I have tried the below code working fine, but i don't want to write another CSS to override grand parent css.

enter image description here.

Is there is anyway to write only one css code which handle the both scenario.(Want only CSS solution.)

Upvotes: 0

Views: 22

Answers (0)

Related Questions