0

Assume a body node having a child node (e.g. div).

There may be css styles attached to the body, which are not known in advance (they are specific to an arbitrary page accessible on the WWW).

The child node (e.g. div) has a bunch of css styles which are static.

How to prevent css styles of the parent to "influence" styling of the child?

Scholle
  • 1,521
  • 2
  • 23
  • 44
  • things like width,font-size,GENERAL position, font-family, and color are based from the parent elements... it is generally better to try and cover your constant styles in parents and then more specific ones with classes or ids depending on how specific you want to be... that is how you override... – Cayce K Oct 02 '14 at 12:28
  • 2
    This duplicates [Prevent CSS Inheritance](http://stackoverflow.com/questions/6206745/prevent-css-inheritance), which is the general case of the problem. – Dan Dascalescu Sep 02 '15 at 10:26

3 Answers3

2

There is no generic way. You need to set a value (other than inherit) for every property that has inherit as the default value.

Even that won't prevent all influence.

e.g.

 body { width: 300px; }
 div  { width: auto;  }

The width of the div is influenced by the width of the body.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • aren't certain css properties inherited by default (without setting the property to 'inherit' on the child at all)? – Scholle Oct 02 '14 at 12:26
  • @Scholle — Yes. Why else would I say to set different values for those properties in this answer? – Quentin Oct 02 '14 at 12:28
  • 1
    @Scholle: That is correct. You have to take this on a case by case basis. There is no bullet proof way. Some CSS styles are inherited. Others, though you may specify the same style, override your style due to CSS selector precedence. – Greg Burghardt Oct 02 '14 at 12:29
  • 1
    List of CSS properties which inherit. [**Link**](http://www.w3.org/TR/CSS21/propidx.html) and [**answer on SO**](http://stackoverflow.com/a/5612360/1577396). – Mr_Green Oct 02 '14 at 12:34
  • @Mr_Green — Doubt that is complete with all the new CSS 3 properties. – Quentin Oct 02 '14 at 12:34
  • @Quentin I am not sure. anyhow, updated with blender's answer. – Mr_Green Oct 02 '14 at 12:36
  • @Mr_Green — That answer says it is compiled from the same (old) source. – Quentin Oct 02 '14 at 12:37
  • @Quentin yup.. no use but thought blender might have added some other properties too. btw, I couldn't able to find list of css3 properties. – Mr_Green Oct 02 '14 at 12:42
2

You could use values initial (compatibility: not supported by IE at all) and unset (Fx27+ only)

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.

where initial value means:

The initial value given in the summary of the definition of each CSS property has different meaning for inherited and non-inherited properties.

  • For inherited properties, the initial value is used, for the root element only, when no value is specified for the element.
  • For non-inherited properties the initial value is used, for any element, when no value is specified for the element.

Source for links and quotes: MDN

Relevant polyfill: https://stackoverflow.com/a/15903168/137626 (brace yourself)

Community
  • 1
  • 1
FelipeAls
  • 21,711
  • 8
  • 54
  • 74
-1

You could reset all properties to desired defaults in the child div like this.

div *{
    property1:default;
    ....
    propertyx:deafult;
}
Aurora Arcade
  • 131
  • 10
  • is there a list of css properties that get inherited? – Scholle Oct 02 '14 at 12:33
  • 2
    It's `initial` not `default`, and not well supported yet. – Quentin Oct 02 '14 at 12:35
  • There is a list of properties here http://www.w3.org/TR/CSS21/propidx.html which show if the property is inherited or not. – Aurora Arcade Oct 02 '14 at 12:37
  • Universal selector should not be used as child selector of other elements. It is not recommended and discouraged because of performance issue. Though, I think it doesn't apply to modern browsers. – Mr_Green Oct 02 '14 at 12:38
  • True I'm just talking about setting your own default value which would take a lot more time than writing initial. – Aurora Arcade Oct 02 '14 at 12:42
  • You can use the [all](https://developer.mozilla.org/en-US/docs/Web/CSS/all) property, which is supported by [all modern browsers](https://twitter.com/LeaVerou/status/577390241763467264). – Dan Dascalescu Sep 06 '15 at 07:29