How to exclude a CSS selector from applying to elements inside a class?

Question

html, body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, 
big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, 
sup, sub, tt, var, u, i, center, ul, ol, li, dl, dt, dd, tfoot, caption, form, fieldset, 
legend, input, button, textarea, select, label, applet, object, iframe, audio, video, 
canvas, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, 
nav, section, summary {
    font-family: inherit; line-height: inherit; 
    vertical-align: baseline; border: 0; outline: 0; padding: 0; margin: 0;
}

I don't want that to effect any elements inside div.base.

Do you have a solution?

"I believe OP wants for the declaration he included in his question to apply to all cases, but NOT to children of div.base – Patrick Moore " — Lê Tuấn Anh, May 12 '17 at 03:44
just rewrite those properties for `div.base` with `!important` — , May 12 '17 at 03:52

score 0 · Answer 1 · edited May 12 '17 at 03:51

Try the :not() selector.

The negation CSS pseudo-class, :not(X), has a functional notation taking a simple selector X as an argument. It matches elements that are not represented by the argument. X must not contain another negation selector. (from MDN)

* { } Styles all the elements. Adding :not(.base) to it excludes elements with class base.

*:not(#div1){
    color:red;
}

Example:

*:not(.base) {
  font-family: inherit;
  line-height: inherit;
  vertical-align: baseline;
  border: 0;
  outline: 0;
  padding: 0;
  margin: 0;
}

<body>
  <h1>Hello</h1>
  <div>
    <h1 class="base">Text</h1>
  </div>
</body>

I don't think it works if he wants to only target divs with class name `base` — Mike Tung, May 12 '17 at 03:28

Web_Designer · Answer 2 · 2017-05-12T04:22:23.853

0

Add this CSS rule which resets each of those properties for elements in div.base:

div.base * {
    font-family: initial; line-height: initial; 
    vertical-align: initial; border: initial; outline: initial; padding: initial; margin: initial;
}

The initial CSS keyword applies the initial value of a property to an element. —MDN

edited May 12 '17 at 04:22

answered May 12 '17 at 04:16

Web_Designer

72,308
93
206
262

Mike Tung · Answer 3 · 2017-05-12T03:21:40.763

-1

If your question is how do I apply a single CSS property or set of properties to everything then you can do this.

   * {
      font-family: inherit; 
      line-height: inherit; 
      vertical-align: baseline; 
      border: 0; 
      outline: 0; 
      padding: 0; 
      margin: 0;
    }
   div.base {
    #set properties for div.base here
   }

edited May 12 '17 at 03:21

answered May 12 '17 at 03:19

Mike Tung

4,735
1
17
24

I believe OP wants for the declaration he included in his question to apply to all cases, but NOT to children of `div.base` – Patrick Moore May 12 '17 at 03:20
Did you read the question? This is clearly NOT what they want – Andrew Li May 12 '17 at 03:20
He can override the style on `div.base` I'll edit to show. – Mike Tung May 12 '17 at 03:20
@AndrewLi how is it NOT what they want? – Mike Tung May 12 '17 at 03:22
@MikeTung Before your edit, it wasn't what they wanted. You just assumed their question. – Andrew Li May 12 '17 at 03:23
It's not an assumption, since the goal was to edit everything. Also if OP had any basic understanding of CSS he would know he can override. So again how is `This is NOT what they want`? – Mike Tung May 12 '17 at 03:24
"I believe OP wants for the declaration he included in his question to apply to all cases, but NOT to children of div.base – Patrick Moore " that's exactly what i need – Lê Tuấn Anh May 12 '17 at 03:42
you may refer with this: http://stackoverflow.com/questions/19464660/apply-css-style-on-all-elements-except-with-a-specific-id – Mr. J May 12 '17 at 04:31

How to exclude a CSS selector from applying to elements inside a class?

3 Answers3