How to ignore parent css style

Question

I m wondering how to ignore a parent style and use the default style  none   I ll show my specific case as an example but I m pretty sure this is a general question    lt style gt   elementId select       height 1em     lt  style gt    lt div id  elementId  gt       lt select name  funTimes  style    size  5  gt           lt option value  test1  gt fish lt  option gt           lt option value  test2  gt eat lt  option gt           lt option value  test3  gt cows lt  option gt       lt  select gt   lt  div gt    Ways I do not want to solve this problem    I cannot edit the stylesheet where the   elementId select  is set  my module won t have access that   Preferably not override the height style using the style attribute     For example using firebug i can turn off the parent style and all is well  this is the effect I am going for    Once a style is set  can it be disabled or must it be overridden

User · Answer

There are a bunch of values that can be used to undo CSS rules: initial, unset & revert. More details from the CSS Working Group at W3C:

https://drafts.csswg.org/css-cascade/#defaulting-keywords

As this is 'draft' not all are fully supported, but unset and initial are in most major browsers, revert has less support.

User · Answer

you can create another definition lower in your CSS stylesheet that basically reverses the initial rule  you could also append   important  to said rule to make sure it sticks

User · Answer

I had a similar situation while working on a joomla website    Added a class name to the module to be affected  In your case    lt select name  funTimes  class  classname  gt    then made the following single line change in the css  Added the line   elementId div classname  style to be applied  important     worked well

User · Answer

You could turn it off by overriding it like this   height auto  important

User · Answer

This got bumped to the top because of an edit     The answers have gotten a bit stale  and not as useful today as another solution has been added to the standard   There is now an  all  shorthand property    elementId select funTimes      all  initial      This sets all css properties to their initial value     note some of the initial values are inherit  Resulting in some formatting still taking place on the element   Because of that pause required when reading the code or reviewing it in the future  don t use it unless you most as the review process is a point where errors bugs can be made  when editing the page  But clearly if there are a large number of properties that need to be reset  then  all  is the way to go   Standard is online here  https   drafts csswg org css-cascade  all-shorthand

User · Answer

It must be overridden  You could use    lt  -- Add a class name to override -- gt   lt select name  funTimes  class  funTimes  size  5  gt    elementId select funTimes         Override styles here        Make sure you use  important flag in css style e g  margin-top  0px  important What does  important mean in CSS   You could use an attribute selector  but since that isn t supported by legacy browsers  read IE6 etc   it s better to add a class name

User · Answer

It would make sense for CSS to have a way to simply add an additional style  in the head section of your page  for example  which would override the linked style sheet  such as this    lt head gt   lt style gt   elementId select          turn all styles off  no way to do this        lt  style gt   lt  head gt    and turn off all previously applied styles  but there is no way to do this  You will have to override the height attribute and set it to a new value in the head section of your pages    lt head gt   lt style gt   elementId select       height 1 5em     lt  style gt   lt  head gt

User · Answer

If I understood the question correctly  you can use auto in the CSS like this width  auto  and it will go back to default settings

User · Answer

Please see below typescript for re-applying css class again to an element to override parent container  usually a framework component  css styles and force your custom styles  Your app framework  be it angular react  probably does this so the parent container css was re-applied and none of your expected effects in css-class-name is showing up for your child element  Call this overrideParentCssRule childElement   css-class-name    to do what the framework just did  call this in document ready or end of event handler           overrideParentCssRule elem  HTMLElement  className  string            let cssRules   this getCSSStyle className           for  let r  number   0  r  lt  cssRules length  r                let rule  CSSStyleRule   cssRules r             Object keys rule style  forEach s   gt                if  isNaN Number s    amp  amp  rule style s                   elem style s    rule style s                                                    Mike Zheng tradrejoe gmail com

User · Answer

You should use this   height auto  important

[css] How to ignore parent css style

Examples related to css