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?

Improve this question
2
  • 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... Commented Oct 2, 2014 at 12:28
  • 2
    This duplicates Prevent CSS Inheritance, which is the general case of the problem. Commented Sep 2, 2015 at 10:26

3 Answers 3

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

aren't certain css properties inherited by default (without setting the property to 'inherit' on the child at all)?
@Scholle — Yes. Why else would I say to set different values for those properties in this answer?
@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.
List of CSS properties which inherit. Link and answer on SO.
@Mr_Green — Doubt that is complete with all the new CSS 3 properties.
|
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)

Improve this answer

Comments

-1

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

div *{
    property1:default;
    ....
    propertyx:deafult;
}
Improve this answer

6 Comments

is there a list of css properties that get inherited?
It's initial not default, and not well supported yet.
There is a list of properties here w3.org/TR/CSS21/propidx.html which show if the property is inherited or not.
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.
True I'm just talking about setting your own default value which would take a lot more time than writing initial.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.