Haroldas Haroldas - 4 months ago 28
CSS Question

how to except all elements css inside div with class?

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

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. I.e.,:

.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.