Is it possible to disabling inheritance within an element?

[coolbananas118]

Hi all

Is it possible to disable inheritance within a div element? I know you can override styles but I want to disable all styles within a div.

I've got a div element on a page (with lots of content and sub elements in it) and I want to disable all styles for everything contained within the div.

<div style="disbale all styles">
<h2>heading</h2>
...content content content...etc
</div>
... start applying styles again.

The only way I can think of doing this is with an iframe however this would require 2 pages, the master page and the iframe pointing to another page. But I don't want to do this because I'm creating the page dynamically on the fly.

Cheers
Matthew

[felgall]

There is no such thing as a div having no style at all. It inherits its style from somewhere - if not from anything in your CSS then from something in the browser defaults.

The only way to apply default styles to everything in the div is to specify those defaults in your CSS.

[Blake Tallos]

Hi all

Is it possible to disable inheritance within a div element? I know you can override styles but I want to disable all styles within a div.

I've got a div element on a page (with lots of content and sub elements in it) and I want to disable all styles for everything contained within the div.

<div style="disbale all styles">
<h2>heading</h2>
...content content content...etc
</div>
... start applying styles again.

The only way I can think of doing this is with an iframe however this would require 2 pages, the master page and the iframe pointing to another page. But I don't want to do this because I'm creating the page dynamically on the fly.

Cheers
Matthew

The only way of having inheritance disabled is by having no inheritance at all.

[coolbananas118]

@Felgall: yes, I'd like syntax to apply to the div to make it revert to default browser styles.
@Blake: how do you disable inheritence then?

How do the email browser clients do it? When you get a nice HTML/CSS email in Yahoo you don't get the CSS from the Yahoo heading tags (H1,H2,etc) clashing with the heading styles/CSS of the email?

Perhaps and example will help:

<style>
h2 {color: #FF0000}
</style>

<h2>What a great site</h2>
<p>I hope you like this great site...</p>

<div class="cancel_inherited_styles">
...dynamic content here...
<h2>some heading which shouldn't be red and I don't want to override to achieve this</h2>
... more dynamic content...
</div>

[Blake Tallos]

Your not able to change the color of the h2 element because the CSS you have gives that color too all of the H2's within the document. One way to target a specific h2 element is by giving it a class or a numeric I'd.

.change {
    color:#FF0000;
}

<h2 class="change"></h2>

#change {
    color:#FF0000;
}

<h2 id="change"></h2>

[Paul O'B]

As already mentioned above a few times now you can't suddenly have some elements that are not affected by the styles you have applied or from inheriting where applicable.

After all that is exactly what "cascading" style sheets are all about and there isn't a mechanism to turn this off (although some times it would be useful).

If you haven't defined any global or descendant selectors and have styled all your page using classes or ids direct on the elements concerned then all you would need to worry about would be the properties that were inherited from the parent. Although that negates a lot of the usefulness of css if you take that approach.

Not all properties are inherited and only things like color and font properties (and a few other properties) would be inherited into the child elements (things like borders, backgrounds, padding etc are not inherited).

In answer to your question your best option is to style the elements in that section as you want them to appear.

[RyanReese]

If you don't want something to inherit you have to manually set the style to the default

Aka

<div><div>text</div></div>

div{position:relative;}
div div{position:static;/*inner div doesnt get relative*/}

[coolbananas118]

@Paul; thanks for the reply. It appears that you are the only one who understood the "I don't want to override". You have confirmed my suspecions and in your words what I've asked defies the key power/logic of Casscading Style Sheets. I'll have to find another work around or go for the override option. By the way; are you sure about the your comment regarding backgrounds not being inherited? Doesn't this example disprove that because the nested h2 has inherited the background color:

<style>
h2 {color: #FF0000; background-color: #FFFF00;}
.cancel_inherited_styles h2 {border: 1px solid #FF0000;}
</style>

<h2>What a great site</h2>
<p>I hope you like this great site...</p>

<div class="cancel_inherited_styles">
...dynamic content here...
<h2>some head which shouldn't be red</h2>
... more dynamic content...
</div>

[Paul O'B]

you sure about the your comment regarding backgrounds not being inherited? Doesn't this example disprove that because the nested h2 has inherited the background color:

No lol - It's a common mistake to think that backgrounds are inherited

The default for the background is transparent (i.e. see-through) and what you are seeing is the background underneath the element.

You can easily test this is true by applying a background image to a parent. If the background was inherited then all the children would have the background image applied and the page would look a mess as there would be multiple overlapping background images.