如何用类除div中的所有元素CSS？

Question

I have html for. ex. like this:

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

And there is css code for all form elements, but I need except this rules to all elements which are 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 like this:

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

Answer 1

From this SO answer by @BoltClock♦:

:not() only accepts one simple selector at a time; this is mentioned in the Selectors 3 spec:

…

If you want to use this negation by itself, selecting all other elements, then there isn't a way using just a selector.

In other words, there is no way to nest a descendant selector inside a :not() selector.

---

As an alternative, I'm suggesting a bit of a paradigm shift in your approach: instead of selecting all the elements except the ones inside the class .classname , add all the rules you want for the other elements and then reverse them by adjusting the .classname styles. Ie,:

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

This should select all the descendants that are of class .classname .

 .smart-form *, .smart-form *:after, .smart-form *:before { margin: 0; padding: 0; box-sizing: content-box; -moz-box-sizing: content-box; } /* you can use initial or auto in most cases to set the properties back to 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 the example above, the styles are set to all the elements, but then they are reversed by the ones just for .classname .

Answer 2

I think you should not put css on it and just put css on where you want inside your div. What is the point of putting css if you just want to have exception?