title: css selector rules --ruleset for all elements within a selector?
body: <p>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?</p>
  
  <p>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:</p>
  
  <pre><code>@#mypage {
         div {
             border: 1px solid #000;
             }
         div p {
             color: #00f;
             }
         }
  </code></pre>
  
  <p>so that any rules I make up are contained to the id of the section of the page I am working on. </p>
  
  <p>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.</p>
  
  <p>Am I missing something simple?</p>
  
  <hr>
  
  <p>Clarification:</p>
  
  <p>Sorry, I guess in my attempt to stay simple I was too vague...</p>
  
  <p>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. </p>
  
  <p>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 </p>
  
  <p>"all tables have a black border" </p>
  
  <p>I risk putting a black border around some table in the sidebar. However, if I say</p>
  
  <p>"all tables within the div #content have a black border"</p>
  
  <p>this only works as long as they don't have a more specific rule.</p>
  
  <p>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:</p>
  
  <pre><code>  #content {
  
      //and place all of my style rules inside of that:
  
  
  
   p {
       border: pink;
     }
  </code></pre>
  
  <p>so that I only have to declare my specificity once and it covers every rule inside that main rule.</p>