SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is it possible to disabling inheritance within an element?

    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

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,871
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by coolbananas118 View Post
    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.
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  4. #4
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @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>

  5. #5
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code CSS:
    .change {
        color:#FF0000;
    }


    Code HTML4Strict:
    <h2 class="change"></h2>

    Code CSS:
    #change {
        color:#FF0000;
    }

    Code HTML4Strict:
    <h2 id="change"></h2>
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,762
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    If you don't want something to inherit you have to manually set the style to the default

    Aka
    Code:
    <div><div>text</div></div>
    Code css:
    div{position:relative;}
    div div{position:static;/*inner div doesnt get relative*/}
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @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>

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •