CSS to prevent child element from inheriting parent styles

Question

Possible Duplicate:
How do I prevent CSS inheritance?

Is there a way to declare the CSS property of an element such that it will not affect any of its children or is there a way to declare CSS of an element to implement just the style specified and not inherit any of the style declared for its parents?

A quick example

HTML:

<body>
 <div id="container">
  <form>
   <div class="sub">Content of the paragraph
    <div class='content'>Content of the span</div>
   </div>
  </form>
 </div>
</body>

CSS:

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

Under normal circumstances one would expect the text block "Content of the paragraph" and "Content of the span" will both be 12px and bold.

Is there a property to include in the CSS above in the "div.content" block that will prevent it from inheriting the declaration in the "#container form div" block to limit the style to just "content of the paragraph" and spare "Content of the span" including any other children div?

If you are wondering why, well, I created a particular CSS file that gives all the forms on my project a particular feel and the div elements under the form all inherit the feel. No problem. But inside the form I want to use Flexigrid but flexigrid inherits the style and it just looks useless. If I use flexigrid outside the form and such it won't inherit the forms css, then it looks great. Otherwise it just looks terrible.

Unfortunately it is not possible to answer anymore; but this would have helped solving your problem: http://css-tricks.com/child-and-sibling-selectors/ — tmuecksch, May 24 '13 at 13:13
Also look into the 'initial' value, many cases will be solved by this, for example - display: initial; — Ben Taliadoros, Sep 22 '16 at 12:44

score 75 · Answer 1 · edited May 23 '17 at 12:18

75

Unfortunately, you're out of luck here.

There is inherit to copy a certain value from a parent to its children, but there is no property the other way round (which would involve another selector to decide which style to revert).

You will have to revert style changes manually:

div { color: green; }

form div { color: red; }

form div div.content { color: green; }

If you have access to the markup, you can add several classes to style precisely what you need:

form div.sub { color: red; }

form div div.content { /* remains green */ }

Edit: The CSS Working Group is up to something:

div.content {
  all: revert;
}

No idea, when or if ever this will be implemented by browsers.

Edit 2: As of March 2015 all modern browsers but Safari and IE/Edge have implemented it: https://twitter.com/LeaVerou/status/577390241763467264 (thanks, @Lea Verou!)

Edit 3: default was renamed to revert.

edited May 23 '17 at 12:18

Community

1
1

answered Feb 22 '11 at 15:53

Boldewyn

81,211
44
156
212

+1 Seems to me the only way to fix it. – Kriem Feb 22 '11 at 15:54
`font-size: default` isn't working in Chrome yet (2 years later) – boatcoder Sep 12 '13 at 13:31
2

As a matter of fact, it's now only 6 months later. I edited the answer in March. ;-) – Boldewyn Sep 12 '13 at 15:27
2

regarding the css `all` property; according to caniuse.com both Safari and IE doesn't support it; http://caniuse.com/#feat=css-all – brillout Jan 07 '16 at 12:08
Indeed. I updated the answer. Thanks! – Boldewyn Jan 07 '16 at 12:30
`default` is not a valid value for the `all` property. I believe the value you want is `initial`: http://www.w3schools.com/cssref/css3_pr_all.asp – mark.monteiro Aug 20 '16 at 20:25
No. `default` was a value in the working draft, when I wrote this answer. `initial` does rather unintuitive things (like setting `display:inline` for everything). CSS 4 now has `revert` added, which seems to act like the `default` of the days of old. (Thanks for pointing out, by the way!) – Boldewyn Aug 21 '16 at 19:39
@boldewyn `initial` does not set everything to `display:inline`. It sets it to the initial value or default browser style, just like it sounds. See: https://developer.mozilla.org/en-US/docs/Web/CSS/initial - "The initial CSS keyword applies the initial value of a property to an element. It is allowed on every CSS property and causes the element for which it is specified to use the initial value of the property." – TetraDev Mar 24 '17 at 16:29
1

@TetraDev the question is, what _is_ the initial value, and here the spec is unambiguous: [_Each property has an initial value, defined in the property’s definition table._](https://drafts.csswg.org/css-cascade/#initial-value). And as it happens, `display` has an initial value of `inline`. It is completely unimportant, if the selector points to a `div` or a `table` or a `span`. As I said above: it's rather unintuitive. – Boldewyn Mar 24 '17 at 21:29
Proof: Look, what the spec says under `Initial:` here: https://drafts.csswg.org/css-display/#the-display-properties – Boldewyn Mar 24 '17 at 21:30
1

Now it is all:unset – Amjad Abu Saa May 08 '17 at 15:03
argh! i've got a span that isn't vertically centering in its parent div correctly. if, in chrome's inspector I uncheck the "height" attribute that it is inheriting from its parent's *class* it centers properly. but if I manually set the height to anything, for some reason it is completely ignored!!! – Michael Jun 09 '17 at 23:36
Have you tried `height:auto`? That's the official default value of `height`. – Boldewyn Jun 10 '17 at 10:03

score 3 · Answer 2 · answered Feb 22 '11 at 15:52

3

Can't you style the forms themselves? Then, style the divs accordingly.

form
{
    /* styles */
}

You can always overrule inherited styles by making it important:

form
{
    /* styles */ !important
}

answered Feb 22 '11 at 15:52

Kriem

8,666
16
72
120

16

!important should be avoided wherever possible – Ben Taliadoros Sep 22 '16 at 12:40

score 0 · Answer 3 · edited Mar 21 '14 at 10:47

0

CSS rules are inherited by default - hence the "cascading" name. To get what you want you need to use !important:

form div
{
    font-size: 12px;
    font-weight: bold;
}

div.content
{
    // any rule you want here, followed by !important
}

edited Mar 21 '14 at 10:47

Balder

8,623
4
39
61

answered Feb 22 '11 at 15:55

Cristian Radu

8,412
2
19
11

28

Ahem, `!important`? That's breaking a nut with a sledgehammer. What has become of the good ol' `form div.content` selector? – Boldewyn Feb 22 '11 at 15:57
4

Actually you're right. He can use form div.content since that will override the inherited style anyway. +1 – Cristian Radu Feb 22 '11 at 16:07

CSS to prevent child element from inheriting parent styles

3 Answers3

Linked