Tuesday, May 3, 2011

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

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.

From stackoverflow
  • 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

  • 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.

    Anthony : 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.
    altCognito : 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.
  • 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

  • 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.

0 comments:

Post a Comment