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.