how to except all elements css inside div with class?


Tags: html,css

Problem :

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


Solution :

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.


    CSS Howto..

    How to give background image in CSS? [closed]

    How to center a image with transparent background in css?

    How to center in div without text-align?

    how to set background-image to pseudo element?

    How do I arrange this in CSS?

    joomla: how is the CSS generated?

    How to denote common class names with slight numeral changes into one - CSS shorthand?

    How to add/insert json data[0] etc to/in jquery $('td').css?

    How to make a simple plus one voting system in code igniter

    Can someone help me figure out how to put normal links into this Jquery Menu?

    How to align image and download button in css?

    How to use float and margin together?

    css div and span display differently in browsers. How to unify?

    How to create a HTML and CSS “Try it yourself” Editor [closed]

    How do you create a webpage with a floating image, top left, bottom right, and with wrapping text in the middle

    Image div showing in Safari, Chrome and IE but not in Firefox

    How to customize unordered list items in HTML using CSS

    How to align HTML elements from bottom to top?

    How to change this FontAwesome to image in Css?

    How to hide classes on some pages in WordPress?

    How to add hover effect to using CKEditor?
    Here is a script to highlight columns where there is checkmarks with an orange background-color. var CKE = $( '.editor' ); CKE.ckeditor(); var columnIndex=0; $("#update").click(function(){ // Output CKEditor's result in...
    Read more

    How to get body content to center on page using CSS

    How to make div size bigger?

    How do I set the background-image property to a linear gradient using jQuery's css method?

    How to set CSS3 ::selection using Javascript

    How to remove rounded from to select query in jquery?

    Nth-child css property is counting html elements with display property set to none. How to change it?

    How to get css background color on

    tag to span entire row

    CSS: how do I force contents in a table cell to stay on one line when browser size reduced

    In css how to display multiple divs?