Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Localised CSS reset

    Hi there,

    I only want to apply a CSS reset to everything that appears inside one top level div.

    Normally its easy to override a CSS reset because the reset is only applied to tag names. e.g. 'p { margin: 0; }'. If I try however and assign the reset to a top level div, e.g. '#main p { margin : 0; }' then its harder to override the reset because the reset is already quite specific!

    Any ideas how I can get around this?

    Cheers, Ian.

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    There has to be something to identify the ones where you want to do the overriding.

    If it is a class attached to the paragraph then you can use

    #main p.classname

    which is more specific than without the class name
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I guess so. I think it might be worth forgoing a reset in this situation. All that specificity could get tiresome.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,925
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Quote Originally Posted by IanIan View Post
    Any ideas how I can get around this?
    Either with the !important keyword or with an even more specific rule.

    Consider this HTML:
    Code:
    <div id="main">
      <p>…</p>
      <div class="example">
        <p>…</p>
      </div>
    </div>
    Example 1:
    Code:
    #main p {margin: 0;}
    .example p {margin: 1em 0 !important;}
    Example 2:
    Code:
    #main p {margin: 0;}
    #main .example p {margin: 1em 0;}
    An alternative to example 2 would be to use a selector/element that is even higher in the DOM than the #main div, e. g. if the body has a specific class or ID you can use that one like:
    Code:
    .bodyClass .example p {margin: 1em 0;}


  •  

    Posting Permissions

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