html - CLOSED CSS avoid inheritance for input in specific div

Question

I'm working on this for almost 2 days and i can't find rigthful help to answer my problem. I hope you can help me :)

I've one master div with an ID ("myDiv") and a stylesheet who override input with specific properties. But, sometimes i'll like not to get the stylesheet specification.

In this exemple below, input1 need to receive the css specification but i want input2 and input3 to be clear. And if it's possible get there own.

I assume you understand it's a small sample from a bigger stylesheet =)

Exemple:

<div id="myDiv">
   <input id="input1" />
   <div class="Picker">
       <input id="input2" />
       <div>
           <input id="input3" />
       </div> 
   </div>
   ... Other html markup
</div>

StyleSheet:

#myDiv input {
   width: 40%;
   border: 1px solid #c4c4c4;
}

I tried this but it's not working at all (:not documentation from mozilla):

#myDiv div:not(.Picker) input {
   width: 40%;
   border: 1px solid #c4c4c4;
}

I tried something else (direct inheritance) :

#myDiv div:not(.Picker) > input {
   width: 40%;
   border: 1px solid #c4c4c4;
}

Thank all for your attention. Apologize for my bad english :)

Bobuche

question from:https://stackoverflow.com/questions/65937983/closed-css-avoid-inheritance-for-input-in-specific-div

Answer 1

Not so clear if you need to match #input1 or the other inputs

in the first case use

#myDiv input#input1 {
  ...
}

otherwise exclude the first input using :not()

#myDiv input:not(#input1) {
   ...
}

both these selectors have a higher specificity than #myDiv input so you will be able to override the properties defined.