css selector rules --ruleset for all elements within a selector?

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.

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

There is a way to do this using a CSS engine e.g. less (node.js library).

According to lesscss' website (and personal experience) you can nest css rules like this:

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

and using the command line utility less compiles this into

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

With less you can also have variables with font sizes etc, so it makes changes much faster.