Question

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.

Answer 1

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.