how to except all elements css inside div with class?

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

score 2 · Accepted Answer · edited May 23 '17 at 11:44

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.

but i need for all elements inside the element with class="noStyle".... — Haroldas, Aug 01 '16 at 15:49
@Haroldas Sorry, I didn't understand that in the question. I'll update my answer. Hold tight! — Jonathan Lam, Aug 01 '16 at 15:52

score 0 · Answer 2 · answered Aug 01 '16 at 15:44

0

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?

answered Aug 01 '16 at 15:44

Frank Mendez

546
3
13
26

how to except all elements css inside div with class?

2 Answers2