views:

309

answers:

4

With at-rules, it's possible to have a ruleset for elements during that at-rule event (like printing, mobile devices, etc.) But what about just for a specific selector?

I am working on a sub page of a larger site, and I have to use the master stylesheet for any of my pages. Sometimes a style rule just gets trumped by a rule from the master style sheet. To overcome this, I end up having to add "#mypage #content blah blah" before all of my rules to ensure my css is more specific. It gets messy very fast. What I'd prefer to do is something like:

@#mypage {
       div {
           border: 1px solid #000;
           }
       div p {
           color: #00f;
           }
       }

so that any rules I make up are contained to the id of the section of the page I am working on.

Oh, I forgot to mention, I can't (as far as I understand) use @namespace, as my page is within a template frame (hence the need for the master stylesheet), so if I just say @namespace (my-page-url) my stylesheet would overwrite the master stylesheet.

Am I missing something simple?


Clarification:

Sorry, I guess in my attempt to stay simple I was too vague...

I am developing the content of a page which will be placed inside of a more generic template (masthead, sidebar navigation, etc) which has a global style sheet and I have no control over any of that content.

I have some liberty with the stylesheet for just my section. I don't want any my rules to accidentally overwrite the global stylesheet, and I want to avoid having to use really long selectors for my rules to avoid the global stylesheet overwriting my stylesheet. For example, if I want to say

"all tables have a black border"

I risk putting a black border around some table in the sidebar. However, if I say

"all tables within the div #content have a black border"

this only works as long as they don't have a more specific rule.

Now, I can go through each rule and add a long train of selectors to ensure that each of my rules works and only for my section, but that's not really attractive or fun to do. I was hoping that I could nest all of my rules inside of a larger rule, like in my example above, so that I can have a main rule:

#content {

and place all of my style rules inside of that:

p { border: pink; }

so that I only have to declare my specificity once and it covers every rule inside that main rule.

A: 

You can ovveride the other stylesheet with the "!important" declaration:

div {
    border: 1px solid #000 !important;
    }
div p {
    color: #00f !important;
    }

More info: http://www.w3.org/TR/CSS2/cascade.html#important-rules

Tyson
A: 

From what I've read the following rule fits the bill, is only one level deep, and is frankly typical of most websites I've seen and used:

#content div {
  ... your rules ...
}

That would only effect divs which are under the element with the id of content.

There's no way to "group" these rules as so:

#content {
  div {
    ... your rules ...
  }
}

That would be nice, but alas, it's not the way it was written.

altCognito
I agree about staying away from important rules, at least when possible. But my question is still not answered, unfortunately. I know I can put an id selector before EVERY rule. What I am wondering is if I can put an id selector before a group of rules so that those rules only get applied to those rules, but for all of them.
Anthony
Ah, I see you've updated the question, I'll read the update.
altCognito
Ok, so let me know if that solution is what you want or why the css rules would have to be even more specific than that.
altCognito
+1  A: 

Not a perfect solution, since it uses PHP-based server-side processing, but this might be good enough for you:

http://www.shauninman.com/archive/2007/06/27/css_server_side_pre_processor

Peter Boughton
+1  A: 

A very similar question (with a rather poor title) was asked a while ago.

The most popular answer was Shaun Inman's server-side preprocessor (which has now been superseded by CSSCacheer).

My suggestion was Sass.

In either case, this is somewhat of a deficiency in vanilla CSS.

Chuck