CSS Overriding and Scope

Posted on 2008-11-06
Last Modified: 2008-11-17
<div id="foo">
..... more markup .....

Assume all CSS rules for the content inside have an id selector of "foo" as the prefix


#foo p{...}
#foo #myspan{....}

Is there any way for these rules to modify/affect CSS outside of the div? Reason being I plan on pre-fixing in this fashion to all user supplied CSS rules so my main page cannot be modified (I don't want to apply !important on all of my rules). Thanks
Question by:Koderz
    1 Comment
    LVL 15

    Accepted Solution

    #foo p {}

    Means only apply the style to paragraphs inside an element with the ID foo.

    #foo #myspan{}

    Means only apply the style to a element with the ID myspan inside an element with the ID foor.

    If p or #myspan are anywhere else on the page the styles will not be applied to them, they must be inside foo for the style to be applied.

    No any style prefixed with #foo can only affect the styling inside the element with the ID foo.

    This will do what you are after.

    Featured Post

    6 Surprising Benefits of Threat Intelligence

    All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

    Join & Write a Comment

    Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
    In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

    755 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now