html - how to except all elements css inside div with class? -

i have html for. ex. this:

<form class="smart-form">   <div>     <p></p>     <i></i>     <div>       <span class="classname"><b>text</b></span>     </div>   </div> </form> 

and there css code form elements, need except rules elements inside .classname:

.smart-form *, .smart-form *:after, .smart-form *:before {   margin: 0;   padding: 0;   box-sizing: content-box;   -moz-box-sizing: content-box; } 

i tried this:

.smart-form *:not(> .classname *) {} // wrong 

from this answer @boltclock♦:

:not() accepts 1 simple selector @ time; mentioned in selectors 3 spec:

…

if want use negation itself, selecting other elements, there isn't way using selector.

in other words, there no way nest descendant selector inside :not() selector.

---

as alternative, i'm suggesting bit of paradigm shift in approach: instead of selecting elements except ones inside class .classname, add rules want other elements , reverse them adjusting .classname styles. i.e.,:

.smart-form * {     /* general css styles .smart-form children */ } .smart-form .classname, form .classname * {     /* specific css styles .classname children */ } 

this should select descendants of class .classname.

.smart-form *,  .smart-form *:after,  .smart-form *:before {    margin: 0;    padding: 0;    box-sizing: content-box;    -moz-box-sizing: content-box;  }    /* can use initial or auto in cases set properties default */  .smart-form .classname, .smart-form .classname * {    margin: initial;    padding: initial;    box-sizing: initial;    -moz-box-sizing: initial;  }

<form class="smart-form">    <div>      <p></p>      <i></i>      <div>        <span class="classname"><b>text</b></span>      </div>    </div>  </form>

in example above, styles set all elements, reversed ones .classname.