Stopping CSS inheritance

I am constructing a website utilizing the Joomla CMS which has CSS which blankets the site. I would like to limit its power over my 3rd party javascripts such as the calender from electricprism.com. This is how I found you. I would like to stop Joomla from ruining a perfectly good script.

Hi James, and thanks for the feedback. As, I hope, you can imagine, diagnosing the specifics of your problem without a physical example is tricky. I’ve had a quick look at the calendar you referred to (quite difficult to find on that site!) and it appears to do ‘the right thing’ in defining its own ‘calendar’ class, to which specific CSS rules can be (and are) applied.

I’m guessing that, due to some highly-specific rules in Joomla’s stylesheet, the calendar styles are being ‘overridden’; to fix that, you’d probably need to modify those styles.

Since CSS doesn’t have any kind of namespace convention (although something similar can be achieved with careful use of ID selectors), mixing styles from different sources is not always as easy as you’d like. If you need more in-depth analysis of your problem, I suggest you either contact me directly, or post your question to a good CSS mailing list where it can be discussed further.

Hi,

Nice site… I like the typography. Looks like Textpattern-powered maybe?

Anyway, I was also googling for those keywords, and found your site.

Me personally, I just designing a stylesheet that overrides my main styles if the body tag has an id applied to it… Long story short, I was hoping CSS had the ability to say something like:

inherit: none;

Instead of me having to override each style declaration.

For example:

#style1 {

font-size: 1000%;

font-weight: bold;

border: 5px solid red;

float: left;

padding: 100px 0 50px;

margin: 0;

}

body#different #style1 {

font-size: 200%;

font-weight: normal;

border: 0 none;

float: none;

padding: 0;

margin: 0;

}

Instead, it would be nice to do something like this:

body#different #style1 {

inherit: none;

}

Where, #style1 would ignore any cascading styles set earlier in the cascade… Essentially reverting it back to the default "div" style browser setting.

Anyway, that is why I searched for those keywords via google. :)

Cheers

Hi Bubs,

First, your initial comment can only be answered fully in a longer format, which I may well get around to. In short: no, it’s not Textpattern, it’s an incredibly lo-fi, home-scripted 'platform'.

On to the main point. Thanks very much for taking the time out to provide an example: it clarifies a lot, certainly in at least this case. It’s possibly a shame, but CSS doesn’t offer such an ability of which I’m aware. One possible solution is to restructure your CSS. For example, can you apply the fist set of declarations just to all pages except for the '#different' one (e.g. give them a body#normal or similar)? Or can your HTML be restructured; e.g. can you exclude the '#different' element from the appropriate pages? Obviously, I’d need a lot more detail to make any judgements, but these might be avenues worth exploring.

CSS reset tools, such as Eric Meyer’s excellent reset stylesheet, could be used to achieve some of what you desire, although they may be taking things a bit 'too far' in your case, leading to a bit more work.

You might be able to use a browser’s default stylesheet — or a combination of several — as an alternative 'reset'. Firefox’s is called html.css (a search in your installation directory should find it) but I’m not sure about the others. Ultimately, though, I fear you’re looking for a solution to a problem that might diminish with some structural reworking.

Hi!

Thanks for the informative reply. :)

Nice work on the site! Simple yet very nice to navigate and visually pleasing.

Also, thanks for the details on the CSS thoughts/suggestions.

I definitely agree with you on the restructuring… Always learning! :)

Anyway, great reply! I appreciate the tips and help!

Have a great day!

Cheers

B

I’m looking to ignore several style sheets that the horrible content management system we use at work automatically loads.

Our IT people won’t change or unload their CSS for the backend UI and it completely tears up the frontend of the site itself. Re-writing classes and IDs to counteract everything the 5 other CSS files are doing is just a pain.

I stumbled here looking for a fix that will ignore or unload all that junk. =P

@PBnJ: This is an interesting case and, I think, could be the cause of a lot of these searches. With that in mind, it’s probably worth a proper write-up, but with your specific issue at hand, let’s see what quick options you might have available to you.

If you’re just talking about viewing content, of course, you can use various features of your browser to disable a specific stylesheet. I guess, though, that you’re a web designer/developer wishing to modify content that, for some reason, is forced to use a specific stylesheet. I wonder quite why that change cannot be made (somehow!) but I’ll give you the benefit — this is pretty similar to problems caused by 3rd-party applications, after all.

The only real 'fix' for this problem, that I can currently think of, would involve writing more specific styles targeting an id'd body element and its descendants. This depends on you having access to the page-level markup, of course. Or, possibly, there’s a javascript solution — maybe modifying the document.stylesheets object or calling /stylesheet.deleteRule (a lot of times!)

Because the current website has a style sheet that is so poorly written and the new elements I am putting on the top navigation are being affected. I want a div where I can do something like <div style="inheritance: none;">. This way I don’t have to redo my entire website.

I am building (have built and now trying to integrate) a small user control(.NET) for the Website of a non-profit organization. I am donating my time as a freelancer, but the company also has a team of developers and designers working for them full time.

Their designers have heavily modified the CSS for the rest of the site to look exactly as they want it. This should not effect my work, as I am simply making a small control with basic styles that will fit into thier design as it is.

However, as you can imagine, many of the styles defined in the pages on which my control will reside are cascading into my control and seriously messing up its layout; to the point of its being unusable.

I want a way to temporarily stop the parent styles from affecting my elements. I do not want to reset the styles to the 'defaults', as that will mess up the parent page. I simply want to stop inheriting for a short space of the page, then continue on with the styles as they were intended for the rest of the page.

I realize this is not possible with CSS. I just wished it were, and was hoping for a quick and easy answer. Since I am donating my time, I have very little of it to fool with specifically overriding each offending style for my elements. So, this is why I searched for what I did.

Hi Danny,

What you describe here does appear to be the most common use-case, and you description is useful in understanding the problem. However, without very specific details, I’m still unsure of the best way to handle this.

As I've tried to demonstrate above, most of the CSS properties that inherit are less 'harmful' than those that do not, so whilst your user control may inherit font weight, size, etc. it should not have its layout radically altered. Can you explain how this is happening?

Whilst a reset for the whole page isn’t what you want, a reset targeted to your specific element (e.g. zeroing margins, setting font weight to normal, etc.) should go a long way to fixing this. You can then use this generically across pages — e.g. with a "reset" class.

Does any of that help, or can you provide further details that might help me to understand the nature of the problem better?

I found this site though using those keywords as well, and the only thing that I have to say about it is that it’s all about choice. CSS should at least give you the option to do it if you want to, and now squawk that "BUT ITS SUCH A NICE FEATURE!!!" I really don’t care that it’s a nice feature and has good uses, I want to turn it off so that I can stop wrestling with a design I am trying to achieve.

I am trying to design a site that has a nice linux penguin translucent background aligned to the right to fill up white space on wide screens, but only in a main content div that will move underneath some other div boxes as (if) the window is resized (or someone has an old school resolution). Unfortunately, the only way to accomplish this is to use a translucent image which doesn’t give quite the same effect as the CSS property does. I want the entire background of teh containing div to fade away, so that the content is more prominent.

The top divs inherit the translucency of the background div and that’s not the effect I want to achieve. I have found that in a lot of ways, CSS makes what should be simple tasks infinitely harder (Re: Tables for a nice "banner, left nav, right main content, footer" layout that CSS cannot seem to achieve easily).

I like CSS for some things, such as creating classes for something that you intend to reuse several times throughout the site, but for the stuff that really should be a no-brainer… Well I spend more hours researching how to hack it than I do designing my site.

I also found this site with a google search for css stop inherit

I was trying to turn off inheritance because

Although I have explicitly set text-decoration to none in the in my APA style paragraph it refuses to turn it off unless I also turn it off for all links which I do not want to do. I have the same issue with trying to turn off the font-weight: bold for the APA links

a {

font-weight: bold;

}

p.apa {

/* Used for APA style*/

margin-left: 2.5em;

text-indent: -2.5em;

text-decoration: none;

padding-bottom: 1em;

line-height: 2em;

font-weight: normal;

}

Rupert, that’s a good example, both because of the description and included CSS, but — more importantly — because it’s an example of something that can be solved — finally! I think.

In both cases, styles on the 'a' elements are overriding those you've explicitly set, but for different reasons. The 'font-weight' is the simpler to explain: since you’re explicitly setting font-weight to bold for all links, the value on parent elements, such as the 'apa' paragraphs, is being overridden. Try targeting the specific link elements whose font weight you *want* to be normal, e.g. "p.apa a { font-weight: normal; }".

The text-decoration is behaving in a similar way, but because your browser’s stylesheet automatically sets 'text-decoration' for all link elements. Again, tackling the specific elements — in this case, "p.apa a { text-decoration: none; }" — will resolve this.

Please let me know how you get on.

Hi there!

The answer is simple: in a project, usually there is a person responsible for the graphical design/css and the developers. The css person most of time is dumb enough and just do the job the easiest way — and this mean he/she doesn’t check the selectors that are being generated by the tool he/she uses. As the project evolves, it becomes impossible — or too risky — to refactor the css and at the same time the developers need to stop the inheritance for, for example, if part of the content from the page is dynamic and we don’t want to inherit the global styles.

God bless the good css guys!

Tedy

Hi there, found the site via search to block inheritance… I am designing widgets to be used on other people’s websites. I've set my css to be VERY specific (div#MyWidget div.topbar h3.title {do this}), however if the host website has general styles (h3 {border-bottom: 3px double #545454;}) those general styles get applied, and look bad or worse break the widget. The widgets are being installed on host websites via javascript, with a link to our css hosted on our site.

I've littered my css with !importants etc but I see no way of foreseeing all possible overrides.

Is there a css solution I’m overlooking? Inline styles? Or is the problem that inserting html via javascript is a bad idea?

It’s things like this that make the old skool font-tag people smug!

Hi "a*p". It sounds to me as if you’re doing everything right, assuming "do this" is sensible, of course! So long as your widget’s styles have more specific selectors than those in the page, they should 'win' and apply as required. If that’s NOT happening, I can only think the selectors aren’t matching, or some other styles are taking effect.

If you can send me a copy of the widget code and an offending page, I’d be happy to take a look in detail.

As you suggest, inline styles might well help to avoid the task of declaring everything with great specificity; as I've said elsewhere on this site, I’d recommend against "!important" unless you’re doing it VERY carefully.

I have actually come across similar problems with some CSS myself recently (specifically, when using the jQuery UI themes), so I’m looking into this problem in more depth and will probably produce a write-up soon. However bad it might seem, though, the font-tag people still have nothing to be smug about! ;-)

I too have the same widget problem — The question is — how do I define ALL possible styles?

I cannot foresee what each website will have so I have to keep on adding more and more styles, in order for my widget not to inherit the parent styles.

Is there no way to avoid ALL inheritance? should I just create a style sheet with all possible inheritable styles and point all my widget elements to that style sheet?

Is there an available list of all inheritable styles?

Hi Dan,

As mentioned in the article, your best bet for informaiton on which properties inherit is the property index of the spec:

http://www.w3.org/TR/CSS21/propidx.html

Just look at the 'inherited' column. As to your general problem, this is coming up time and time again, seemingly with greater frequency. It seems that, as sharing of content via 'widgets' continues to gather pace, the problems surrounding the combining of CSS from multiple sources are becoming more of an issue.

I think the best general advice for widget styling is: be as specific as you need to. Fisrt, use inline styles to ensure they won’t be overridden. Second, only specify those styles that you actually care about. For example, do you really need to provide a font choice, bearing in mind your users will be embedding the widget on a site in which they've probably already made such choices, for a good reason. Same goes for font-size, colour, line-height, and many of the inherited properties, to varying extents. If your widget is flexible, it probably doesn’t need an awful lot of styling to adapt to anyone else’s style, and I think that’s probably how it should be.

Thanks — I’ll definitely take those points into consideration. I know this may be off topic — but you seem to know what you’re talking about when it comes to JavaScript, so I have to bring up this issue which may also be a good topic for debate: I need my JavaScript widget to send a short description to the server in order to see if the web page has changed since the last time it was accessed. I tried counting the characters of the body.innerHTML but found different results between browsers. I tried to count the number of text nodes — still discrepancies between browsers. I also tried to remove all on alphanumeric characters and a bunch of other tricks, but I am coming to the conclusion that there is no definitive and unique descriptor which defines a web page’s content using JavaScript which will yield the same result using different browsers. Is this the case or am I missing something?

Dan,

Although I have no direct experience of the exact thing you’re trying to do, here are a few initial comments:

a) Can you achieve this using standard HTTP mechanisms such as the Last-Modified header? This will probably be most reliable, and should be achievable using javascript from within your widget.

b) Does the script actually need to work cross-browser? Just checking, because I’m not sure I’m entirely certain of what it is you’re doing, but I guess this depends on whether the server is making comparisons between many different client requests, which it does appear to need to do.

c) The most obvious differences between, say, the IE and firefox implementations of innerHTML are whitespace and case. I’d recommend you remove all leading/trailing whitespace and toLowerCase() the strings before making any comparison.

If you want to discuss this any further, please feel free to email me — the address is available via the contact link at the bottom of this page.

Cheers.

I have an external windows component which lets users post messages on a web site. The component renders messages as HTML text with inline styles which format font size, family, weight etc. These style obviously get overriden by main styles on a web sites. Users do not have the ability to upload CSS classes on their own.

The only place I can fiddle is a div tag where HTML text goes. My div tag uses Notification css class. I tried clearing font styles but it does not help because if I set font-size like so

.Notification span, div, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, font, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

dl, dt, dd,

fieldset, form, label, legend

{

font-size: 100%; /* or medium or none */

}

all the HTML text will have one font size, no matter what users specify in the windows component.

If I could stop inheritance then inline style would get properly applied.

I think there is enough use cases for CSS to have a feature like "inheritance:none;" to start from a clean page so to speak.

I have an external windows component which lets users post messages on a web site. The component renders messages as HTML text with inline styles which format font size, family, weight etc. These style obviously get overriden by main styles on a web sites. Users do not have the ability to upload CSS classes on their own.

The only place I can fiddle is a div tag where HTML text goes. My div tag uses Notification css class. I tried clearing font styles but it does not help because if I set font-size like so

.Notification span, div, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, font, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

dl, dt, dd,

fieldset, form, label, legend

{

font-size: 100%; /* or medium or none */

}

all the HTML text will have one font size, no matter what users specify in the windows component.

If I could stop inheritance then inline style would get properly applied.

I think there is enough use cases for CSS to have a feature like \"inheritance:none;\" to start from a clean page so to speak.

I have a few rows that are DIVs with DIVs inside them. The parent DIV has a hover style that changes the background color to red and the text to white. But the DIV DIV A color remains unchanged and is also red (so it disappears). The A color is defined by a stylesheet in the template that I cannot change.

A simple but very elegant answer to my question which has been questioned.

Internet Explorer 8!

If you came this far, you’d already know why. A solution would be firefox but my client’s client will not bother especially when all their office equipment is a grant from the bill and melinda gates foundation. The blame’s all on the developer. Version after version, microsoft never ceases to find a way out of the way of standardization. At this point, ALL HACKS ARE PERTINENT because of internet explorer and the gates foundation. May i ask you now after reading all your rants — How can you give me back my 15 minutes of reading into void?

So is there a way to cut off inheritance. I have a snippet of html that displays

fine by itself but when plugged into the page it displays some fonts that are at 12pt bigger and others at 12pt are smaller. both IE and Firefox have the same bug or something so

I wanted to do something like inheritFromParent=no just as a quick fix. Instead,

this issue will probably waste a few hours and I need to get this release out…..shoot.

I wish I could cut the inheritance off though with my luck, the browsers would have bugs

there anyways and I would be working on a new issue…it would have been nice though.

i wanted to stop inheritance while using the opacity css3 value on a div, which was causing the child elements to also be transparent.

Hi Jeff,

Your request may be easier than others — have you experimented with RGBA colour, at all? It will allow you, in effect, to set opacity on a background-color, without affecting the foreground content. Or vice versa. Much nicer than opacity.

Although it’s no consolation, you’re not actually seeing inheritance when it comes to opacity, at least, not in the CSS sense of inheritance. You can verify that by setting opacity on a parent element, overriding it on a child, and noting that the effect is 'cumulative', as opposed to a true 'override' taking place.

Thanks for the informative site. To answer your question as to "why do so many people want to stop CSS inheritance?" …In my case, I teach online classes using a CMS that was poorly engineered when it was developed in the mid-90's, but we have not been able to migrate to anything better due to internal politics.

The antiquated code base has grown, but I suspect not maintained, and has a CSS style sheet that has grown to over 2,200 lines long. It is completely intelligible (to me at least), uses the word "important " 216 times, and never displays any formatted content in the way one would expect. It also prevents the user from controlling appearance of their content except through the use of inline styles.

So it would be great to be able to selectively stop CSS inheritance, to be able to use my own styles for the content I publish, to make longer blocks of content more readable for my students. I just don’t think it can be done given the limitations imposed on users by this wretched CMS.

However, I agree with you that one shouldn’t have to resort to this type of kludge, if style sheets are properly implemented.

Thanks for listening!

My issue is similar to Jeff’s above. I am formatting div boxes, and I want images contained inside my translucent div to be opaque. I wanted to use a translucent background image in order to avoid the whole problem, but my software is being finicky and I cannot save any translucent images for some reason, so I used opacity as a quick fix, which of course raised more problems.

If you look at my site now you won’t see what I am working on, because right now it just points to a tumblr with a default theme. Not publishing until I am finished ;D

I am adding extra functionality to ckeditor. I am trying to make it easy for someone to use an image from their filesystem instead of having to have a url to link the image.

I am adding in a button to submit your upload which will use php/ajax to upload it and spit back the url into the input box for image url.

The problem is my button has no styling on it because somewhere in the magic that is ckeditor it gets rid of all styles on inputs/buttons.

I just want the default styling but can’t figure out a way to do it

I’m facing this problem right now. Is there some sort of work around?

I am just struggling with the same problem with JQTOUCH.

During development I love to have a

<div class="debug_dump">

for showing some debug information.

</div>

But I CAN'T SEE it, because elsewhere in jqtouch.css there are some definitions as:

* { … }

body { … }

body > * { display:none; …. }

So you are suggesting that is use the following declaration :

<div style=" display: inline; margin: 0px; font-family: Helvetica; font-size:medium; font-style: nomal; font-weight: normal; font-color:black; background-color:transparent; background-image:none; height: auto; width: auto; margin{0,0,0,0}; ">

WHOW, what a monster !! And I am not quiet sure if I have included every property which might have been set by jqtouch.css

How easy would it be, if we can use:

<div style="inherit:none">

Just my 2cents

Klaus

@KDiddy: First off, please accept my apologies for the comment formatting weirdness! I’m not entirely sure what happened there, but I’ll have a look into it — should be clean up now.

As to your point, it’s useful to have yet another high-profile use case to work with: jqtouch. Do you have some example code you can point to?

In this specific case, I certainly wouldn’t recommend putting the 'reset' code inline. Rather, you could create a specific class for that, and either use very specific selectors (to cancel out the jqtouch ones) or the dreaded "!important". Admittedly, neither is ideal, but the route cause of this problem could well be considered to be jqtouch.

What with the increasing reliance on a whole host of third-party scripts, 'widgets', etc. it seems as if CSS inheritance really does cause problems. CSS is just not designed to robustly handle combinations of stylesheets from several sources — in all cases.

@KDiddy: BTW, at least one solution is to edit the jQtouch code like so. Still not ideal, but it might help in your case.

I want to block CSS inheritance because I’m generating a simple HTML newsletter that I want to be able to preview for the user without opening it in a new window (this site is using ASP.NET MVC; the master page loads the CSS files). Not using the master page means that the preview would not be part of the same look & feel as the rest of the site.

Gmail and Outlook have poor CSS support for HTML email (http://www.email-standards.org ) and Gmail will only recognize inline CSS (not even embedded in the header). Hotmail doesn’t support a number of CSS properties either, but better than those two.

Gmail doesn’t support the background-color, color, float, and a host of other CSS properties, so if I want to support it (which the client wants me to), then I have to resort to using HTML bgcolor attributes, table layouts with transparent spacer GIFs, and all of that other crap that we were supposed to be able to stop doing years ago.

So that’s why I want to block CSS inheritance; the generated newsletter HTML does not reference any external CSS, but the page in which I host the preview does, so it totally screws the layout of the newsletter.

I just thought of something though… this is part of the site admin tools anyway, so perhaps I can use a little Flash or Silverlight plugin to display the HTML without it being affected by the master page’s CSS. Hmmm….

Hiya Bobby!

The reason I’d like to remove inheritance is that I have a list within a div within a list which is within another div, and I don’t want the outer DIV to give its list styles to the inner list.

The inner list is inside a DIV and I would like the style from that DIV to be what controls the list, rather than the outer one.

In a different context, I might use a class, but I’m applying this styling to pre-existing HTML so would prefer not to have to add arbitrary classes wherever this requirement is required.

I was trying to print content of an iframe which was inside a div. div had set display: none; for printing so it couldn’t be printed. Since by standard, display property is not inherited, it should be possible to print the iframe, and it was possible except in Opera (peculiar), where it seems to me that iframe somehow inherited display: none; from parent element.

It might have been some other problem, but eventually I used some different solution.

Such a nice blog, it is really interesting,you are really a hard worker guy, Thanks.

My problem is not that I want to stop inheritance, my problem is just I wish to remove the "inherit" property for a particular element. Is there a solution for this?

Here is the simple scenario:

a {color:red} /* global */

div#toto {color:gray} /* a sidebar with 'unimportant' material */

div#toto a {color:inherit} /* I want a-tags in the 'unimportant' materials to not stand out either */

/* now this is where I start to have problems: I want all the text and a-tag’s styles to go back to behave *as if I never set 'inherit'* */

div#toto:hover,div#toto:hover a {?}

I wish something like:

div#toto:hover {color:}

..would work. As a side note, styles on am element can be set to an empty string in javascript, it would be great if CSS allowed it as well..

As it is, I have to replicate the global a-tag style in

div#toto:hover a {color:red}

Trivial for this particular example, but burdensome for large site. Changing the global style would require to revisit all replicated styles.

Oh by the way, I got it working, *using CSS3*:

div#toto:not(:hover),div#toto:not(:hover) a {color:gray}

But since it uses the :not() pseudo class, a bit of a problem since IE, even the latest IE8 doesn’t support this one, I've tried (IE… sigh…)

Quite simply…

I have global styles that I want to inherit throughout the site. Every once and a while I might want elements that do not inherit. These elements are "exceptions". It would be nice if we could simply put "inherit:none;" in a style or class that would state, don’t grab any styles from my parents.

Instead I have to define a counterstyle for that element. I can do it, but I would prefer not to.

Interesting intellectual excersise. Too bad it comes off with so much arrogance.

Here’s my answer:

I have a custom written DLL that spits out some simple HTML using data from a database. I have no control over it, the guy that wrote it died in a car accident. The customer needs it too look a certain way for a new site rebuild, which they themselves will edit later.

So, I have to make my CSS work without someone knowing much if anything about it.

I am using a "div.class p:first-child" setting for a shared div to put news items on the home page and make the first paragraph a heading within each of the news div boxes.

Which, unfortunately causes every other div within the "news div" boxes to re-start the first-child property, and make THAT first paragraph a heading. Basically making it impossible to do something like make a div with a background behind one paragraph because the first-child property makes the whole thing a heading too.

Now the entire point of CSS is to take the styling and layout decisions out of the HTML and let it be just data. Instead of being able to put a blanket "don’t let something inherit to this div" command on internal divs, or "make this the bottom of inheritance" I have to make another "first-child" property class and make sure any new div put in the "news div" boxes has that class.

And then teach an ignorant user to remember to do this.

I will have to spend a bunch of time educating a user.

I will have to spend a bunch of time making the additional classes.

The web pages will be harder to update in the future.

The CSS will be harder to update in the future.

It seems to me like it is pretty clear that a property to stop inheritance would be pretty useful. You are just to myopic to see it.

Lastly, thanks a lot for wasting my time with a web page that implies there is a way to do it, injecting your own little petty rant into it, while arrogantly assuming you know what I might want to do with CSS. If you aren’t TRYING to be a dick, put a line like "There is no way to do this" at the top.

Hi Nick,

First of all, to address your complaints:

• This post was written a year and a half ago, in an attempt to gather feedback about exactly why people want to stop CSS inheritance. I've learnt a lot from these comments, as I’m sure others have. I think the article’s intent is pretty clear right from the beginning, but I’ll consider adding an update along the lines you suggest.
• The petty rant — I assume you’re talking about the universal selector article; if not, please clarify  — is in response to exactly the same sort of issues you’re facing: poor practise leading to difficult maintenance.
• It certainly wasn’t my intention to come across as arrogant, and I apologise if that’s what’s happened.

As to your specific problem, I’d love to see if I can help, but I’m finding it hard to understand the exact nature of it. Can you supply a URL which demonstrates the problem? Failing that, some markup + CSS posted here will give me a little more to work on.

@Charlie,

So, if I understand correctly, you have something like this:

<div>
    <ul>
        <li>
            <div>
                <ul>
                    <li>item one</li>
                    <li>item two</li>
                </ul>
            </div>
        </li>
    </ul>
</div>

And — for example — you’re applying a colour to the outer DIV:

div { color: red; }

which is then affecting the innermost items ("item one" and "item two" in this example). The easiest way to get around this is to target the inner DIV with a more specific selector, e.g.

ul div { color: black; }

You can be as specific as you like so, if necessary:

div ul li div { color: black; }

Is that of any help, or am I misunderstanding the problem?

Here’s my problem/reason for searching. I have a Menu generated by wordpress. It’s a 3 level menu and I've styled it into a dropline menu. I display a submenu only when it’s parent is selected (obviously).

For example;

Menu 1 | Menu 2 | Menu 3

Child 1 | Child 2

Grandchild 1 | Grandchild 2

Wordpress makes this easy for me by tracking the pages and adding the appropriate 'current-page' and 'current-page-ancestor' classes to the LI's. When an item in the top level is selected it’s child menu becomes visible with

.current-menu-item ul { display: block;}

The problem is the above rule trickles down and overrides the rule which hides the submenu. So as soon as you select a parent menu, every level of child menus is displayed. If I could say;

#menu ul ul,

#menu ul ul ul {inherit:none;}

Then the default state of a child menu would be hidden, regardless of it’s parent. I’m sure there is some way to manhandle the CSS into doing this, but it’s a lot less logical and elegant than simply having the option of cancelling inheritance.

@George: 'display' is one of those properties that, by default, doesn’t inherit since it’s logical that it doesn’t. What’s happening here is that the selector (".current-menu-item ul") is matching all ULs within .current-menu-item.

If I've understood your problem correctly, there are two possible approaches to resolve it:

1. Cancel out the style on sub-menus with a more specific selector, e.g. '.current-menu-item ul ul { display: none; }'
2. Restrict the initial selector to only the immediate child, e.g. '.current-menu-item > ul { display: block; }

I hope that either of these approaches will help you out. Please let me know if there’s still a problem.

Thanks for the reply, your understanding of the situation is 100% correct.

I’m using the first solution right now, and it’s working but by the time I get to the third level of submenu’s I've exhausted my ability to increase specificity since every time I un-hide a level I need to write a more specific rule, then I need to write an even more specific rule to cancel out the previous rule on the children.

Your second solution should work perfectly. I wasn’t aware that the child selector works like that. Thanks for the great tip.

Here is why:

I have a parent div which has <a> defined for all links inside of it and its child elements.

But sometimes I want to have links looking a bit different.

Sorry … no go.

Inheritance.

I hate that your site comes up 1st in the rankings for 'stop css inheritence'. because all you do is bitch about how you shouldnt do it, simply because you havnt found a desire to do it.

Its frustrating when someone argues that you shouldnt just because they don’t see a need. you sound like a self absorbed arrogant asshole.

Could you imagine that someone else might find a legit reason to want to stop inheritence? no, you cant imagine that because your so wrapped up in your own bullshit.

Your site title is '5 minute argument'. I should have known before coming to your site that all you would do is bitch about how its not a problem instead of working on a solution..

I know this is an old post but I’ll add my 2c: I’m developing with Qt which uses CSS to style its widgets. I’m developing on Windows 7 and if I add a normal combo box it looks like a windows 7 combo box. If I then set its stylesheet to read: "border: 1px solid black;" or any other border manipulation, it ceases to look like a Windows 7 drop down and instead looks like a windows 2000 dropdown (much crappier). So the fix is to not add a border to your combo boxes. My problem, however, is that my combo boxes are children of another widget which I need to have a border set on and since Qt’s CSS inherits border information (unlike HTML+CSS, as you mentioned above) my combo boxes end up looking like crappy Windows 2000 combo boxes instead of the Windows 7 look. So I want to add a CSS rule to my combo boxes to make sure they don’t inherit the border from their parent, but I haven’t found a way to do it yet.

Also, this is an interesting case because CSS is used in places outside of HTML where breaking inheritance might be more natural.

I stopped in here because I an writing a css/html parser and was trying to clarify rules about inheritance. It’s rather difficult to find exact rules on many aspects of CSS. I was specifically wondering if inline style will be inherited by children. It looks as if that’s the case.

Ok, here is a really good reason why I want to be able to break inheritance.

Full page background image, with a .7 transparent box overlaid. Box contains text & images, and scrolls vertically while the background image remains in place.

Problem is, the opacity=".7" style created for the box, is inherited by all the elements inside it -so all the images & text are transparent as well.

So far I cannot find a way to limit the inheritance of the opacity style to the box alone. Any ideas?

@Adam:

The behaviour you describe isn’t inheritance, strictly speaking, it’s just the behaviour of opacity, and is a common ‘problem’. Modern browsers support rgba colour definitions to support ‘alpha’ transparency; this will give the effect you’re after. For example:

<p style="background-color: rgba(255, 0, 0, 0.5);">Lorem ipsum dolor sit amet</p>

Here is my reason for trying to break inheritance:

I am using a jQuery plugin to display a directory/file tree. The plugin comes with its own set of style sheets, which I included. However, the style sheets of the plugin expect a clean slate and the layout is disturbed by the style sheets that I defined in the page that embeddes the plugin.

Now, I don’t want to find out all the things from my page that interfere with the plugin, I just want to give it a clean slate, ie. in the surrounding element reset all style sheets.

Cheers, Robert

Hi, I got there exactly with same search terms :-)

As part of my website I have custom header customers can change by means of providing own HTML and CSS. Header is essentially rendered as a div with specific class. However, some styles defined in a libraries we use defining global styles. e.g. for links so I have to change that or ask customers to always redefine style for anchor.

I would prefer to somehow indicate that elements with specific class or id should not inherit global styles.

there should be an option for disabling inheritance on a case-by-case difference. It puzzles me greatly why anyone would think that an option for disabling inheritance shouldn’t be included.

Take the opacity value for example. If I set a div to have .8 opacity (because I want the web page’s background to show through), but I don’t want it’s contents to be translucent (like images), I can’t tell the browser to simply render the image as 100% opaque by wrapping it in a general div called "images" and setting it’s opacity to 1. It just doesn’t work that way.

Why? Because some genius out there decided that web developers didn’t need to worry about mundane things like deciding which of their divs would inherit what.

Darn socialists.

I like this post. Thank you for sharing it with us.

My reason to break inheritance is that the widget I have created works nice as long as it is iframe one.

Now to make it bit more crawlable by Search engines I wanted to try document.write method.

Which did worked great on test pages but as soon as it started showing up on different sites they all had different things clashing with my widget code.

Tried putting in style statements for elements in the code itself.

Yet some images get huge borders and margins.

I got here today because of a problem that I solved by using ! important as mentioned here (http://www.w3.org/TR/CSS2/cascade.html#important-rules). Not sure if this adds anything to the already voluminous comments.

I would like to create a whole block of html that displays exactly the same no matter where you load it into some html content or what html content you load it into.

example 1. WYSIWYG content looks exactly the same in an admin section as it does in the page it is being added into.

example2. Repeating content blocks or nodes from a cms that look exactly the same no matter what page they are loaded into or even if it’s in the left margin, header, footer or centre section.

example 3. We create HTML email, when it’s loaded into a web mail system (hotmail, gmail or other proprietary ) their css sometimes over-rides some of the email css and breaks the layout. Not by much, but enough to annoy clients who want pixel perfection.

It would be a useful rule that would enable you to build almost micro-pages within a webpage without an iframe.

Hi,

I came across this discussion because, I too have a problem with inheritance in css.

I applied a style for the links on my site. On the bottom of my site is a web statistics button. On that one, I don’t want the style to apply, so I placed it between <span> with a "no style" style (setting every property to 0 or normal.

In Safari, that works, in Firefox and Chrome not. You keep seeing a border, where I declared to use NO border (tried 0px as well as none).

Just for that ONE link, I don’t want to use the tip from Five Minute Argument.

Why doesn’t the border: 0px / border: none work?

Greetings

Jonathan

Perhaps my method is simply bad practice, but I have a decent sized stylesheet I've developed over the years. It includes a bunch of classes that make it easier for me to style things with common attributes. For example, if I want an error message to stand out I’ll give it the .error class, which simply makes the font bold and red. If I want a table to have width: 100%, I’ll simply apply to it the .stretch class. In effect, I’m making aliases to common attributes.

Now I have a table. This table contains a whole bunch of content included from other files (via php). What these other files contain is irrelevant. I DON'T want any of the content from these files to change. But I want to change the look of the table. So I apply a class to it.

BAM, anything in that class now affects all content in that table, no matter how deep my file include structure is.

So, if there was a way to apply a class to a table (or div for that matter) that contains a bunch of stuff I don’t want to change (read: stop inheritance) my problem would be solved.

On a similar but alternate note, one of the above commentors described how he had a div inside a li inside a div inside a li… or some such. Yes you can use CSS such as div li div {}. But what about when you’re dynamically generating content? What if I don’t know how far the divs and lis will be nested? What if one of those divs grabs content from another site? What if, as is such a common case, I’m simply developing a shell of a site for others to add content to? How do I know what styles they will want to use?

Being dynamic is what it’s all about. CSS stylehseets are a huge step forward in being dynamic over HTML or inline CSS, but the lack of control over inheritance is one step backwards. If granular inheritance control were planned for future versions of CSS I would understand, "we're just not there yet." But arguments against even <i>taking</i> that next step are both ignorant and insulting.

How would you feel if car you bought had cruise control but only for preset speeds like 35, 55, and 70 mph. Nobody needs to do anything different, so why would you need to develop controls to set the specific speed of the cruise control right?

Okay that was probably the worst analogy I've come up with in a long time, but it at least describes how we developers feel about the five minute argument against inheritance control.

In fact, any argument that beings with "why would you want to?" should immediately be retracted. Someone will ALWAYS have a reason.

I teach CSS and web design for a living as well as building and designing websites, so I have seen most things and worked with a lot of designers and met many many people trying to do all kinds of things in their web designs.

I am not a big fan of the idea of a reset style sheet or setting base sizing or layouts or removing inheritance. In my view most compliant browsers have a good set of default methods, including inheritance, that are there for a good reason and help the browser layout and display a page in a sensible way. I feel that many designers pick a fight with the browser and try to take control of its defaults as they feel their own logic is better than the browsers. However in most cases this simply stems from a lack of understanding of some or all of the fundamentals of DOM, HTML and/or CSS.

I think if designers understood the browser better and then just worked along side it’s default methods CSS would be more effective, efficient and robust too. I mean what is the point in removing all default padding and margin on all objects to then just have to add most of it back in later on!

Having set that regarding inheritance; I think there are some occasions when stopping inheritance could be useful. For example using the newer CSS3 property of opacity. Most designers would like to change just the opacity of the background image or color, but opacity is an inherited property, so setting it affects the opacity of all items contained inside the styled object, including it’s text.

Trying to selectively apply opacity to parts of a container or stopping inheritance happen is sadly rather tricky and currently there are not easy solutions to this — most are hacks or work arounds of some kind.

@Bobby Jack & @Simon Pointer

It’s pretty straightforward. I would like the computer to work for me, not the other way round.

I think CSS is broken in many ways (multiple inheritance, which is also implied _and_ variable — wtf????) but there is nothing that screams broken more than the inability to do _exactly what I want_ regardless of whether someone who "understands" design/DOM/CSS/whatever better than me thinks I should do it that way.

Two far, far better ideas would be:

1. to have a pragma/attribute at the start of a stylesheet or where it is used (just somewhere) that says :defaults or :no-inheritance or :whatever.

2. A no-inherit property. It’s a no brainer.

An even better idea would be something that wouldn’t make me wonder if inline styles are actually better. I mean, I wonder… would I really lose if I went all the way back to that? I’m tempted (for dynamic content).

I’m working within a CMS system (joomla) and my declared styles are being overridden by the styles css…

A possible example (I wait to be shot down!)

[caps used for clarity only]

My default css has TABLE TD{…}

and I have added TABLE.myClass TD{…}

I would EXPECT inheritance to come from TABLE.myClass only

But it also comes from TABLE TD.

This means I have to specify every property in TABLE.myClass TD that I do NOT want to inherit from the "pure" TABLE TD…which IMHO is clearly wrong.

If my TD is declared as part of TABLE.myClass then it should NOT inherit from another TABLE…only a higher element such as BODY. I have set my "inheritance rule" by declaration to say "TD, you belong to TABLE.myClass so you should only inherit from TABLE.myClass"

Am I mistaken?

I hope that you can help me with the problem I have got. I’m using Joomla! 1.5 and I noticed yesterday that the text on my articles (not the homepage) was blue when it should be black. From my limited understanding of CSS etc, I’m wondering whether the text is inheriting the colour from the h1, h2 tags because they are exactly the same colour? I've got to be honest, I’m pulling my hair out about this, it’s extremely annoying that this has happened.

Below is a link to one of the pages on my website we can clearly see the blue text which seems to be following the paragraph tag colour.

http://www.oscarfishlover.com/tank-setup

I have a default CSS for all of my pages that styles the input {border:none;…etc…} which is fine for those pages, but then I have a wiki that is 'inside' one of those pages, that had my default css, plus it’s own css, the problem is that my css kills the default styling of the submit button and it would be nice to disable the styling from my CSS file, so that the submit buttons look normal in the wiki, otherwise I have to create an image to restore the look of the original button, or redo the CSS and all submit buttons on all of the other pages of my site… it would be much easier just to disable the input styling form my CSS so that the submit buttons look browser default.

I too google div clear inheritance and found myself where I am now. I am no CSS guru but wnate dto add a new css driven menu bar to an opencart site. It all works in test but when putting it live the div that contains the menu bar is clearly inheriting fonts and colours from overiding styles in div containers. Surely it would be simpler to be able to say clear:all; for my one div style and then specify the attributes I need rather than what I presume I now have to do which is redefine every parent variable that has been set previously?

Thanks

Same issue here that a lot of others have. It would simply be nice to disable inheritance for an element instead of manually writing custom property after custom property to counter act styles that you do not need in child elements. Sometimes I just want to start fresh in a div as if no styles have been applied. I often find myself writing pages of css to counter someone else’s styles that have not been properly identified and applied to the site/div globally. Sure I could remove all of their code and start from scratch but this creates more work than the original solution. Either way, you have more work cut out for you than simply breaking inheritance with one property. (eg. inherit:none)

My case is quite simple, and similar to one above. I don’t actually WANT to cancel inheritance, like some here, even though it would be very useful in this case. No, i would simply like to have whatever class I apply directly to an element not be overridden by some rule I can’t quite understand that applies the styles from a different, targeted (eg article header div div.content p p) type description. I applied the class to the element directly, it should take precedence. Unless I never want to reuse a class on two buttons at once.

Now to do this i have to make a css rule that explicitly targets the element (7 nested levels), for each of the 2 location. If I explicitly set the class on the <a>, it’s properties are overidden by several other global classes.

It’s frustrating as all hell.

Necropost!

Here’s why: I’m designing a page where the <a> around an image is color-coded to another area of the page. I want to stop the particular <a>'s from inheriting the general hover/visited/link/etc attributes.

Now my understanding that what is written on the page and also what is more specific should take precedence over the <a> attributes on an external style sheet, but my customized <a>s still aren’t showing up.

So I think, well, I see that the customized <a> tags are inheriting the main colors I've set for all <a> tags in general. And I've done everything I know to do to make the customized CSS more specific and later on the page. So my next question is how to get it to stop inheriting that feature.

em (font size)

-1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses.

ems use inheritance to make the internet suck.

"css no inherit" :-) old post but still living, so here is my scenario and solution (not an universal one, as each coder has his own purposes to do that — not stepping further into this one), easily found through the mentioned "Full property table" — thanks for the link!

in my custom made CMS, my unexperienced costumers need WYSIWYG — so now they get their page contents updated via a contenteditable DIV#pageContent, flanked by several (js/css) helps and widgets; one of these tracks all mouseover and click events on that DIV to both highlight the *current* element (tag or textNode, adding/removing classes to it) and show the hierarchy behind it — 

the problem comes when the user interacts with a textNode whose parentNode has other children as well, as in

< div "pageContent" contenteditable >

< span >

< b > some text not to be highlighted < / b >

some text to be highlighted

< / span >

< / div >

so far, the CSS rule to highlight onmouseover is ok:

#pageContent .over{outline:1px dotted #f00}

it adds a thin outline to che current element (or parentElement if textNode), a seldom used property for my costumers that doesn’t mess with the box-model (so not to mess too much with their original layout)

but what can i use to only highlight the clicked textNode at the *root*-level of the SPAN and NOT the text inside the B ?

the mentioned "Full property table" easily permitted me to isolate the ONLY one property i can actually use (or do i miss some other ones? as my chosen platform is firefox, maybe some proprietary css extension?):

#pageContent .click{ text-decoration: overline underline;}

that’s it — no more control over this case but that, with CSS — but at least it targets the textNode only, nearly in the correct way (in facts this targets EVERY *sibling* textNode in the span, not only that one where the user actually clicked)

[ sure, for my case as i already employ js i could add/remove a wrapping tag around THAT textNode on the fly, but this gets out of this CSS-no-inherit discussion ]