SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

    CSS specificity in head of doc

    Can't believe Ive never noticed this before. Maybe I forgot it. Either way its surprising to me. I feed my pre rules like this. #code pre. The code id on the body. I went to override the pre and put in some rules in the head a the doc like pre {...} without the id. Surprising to me it did not override it unless I included the id before hand. I would of thought the head trumped the id. Wrong obviously.

    On a side note I am going to try only classes with my next project and no ids and see how it goes. I bet head would trump .class element {...}.

  2. #2
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,254
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)
    Nope - the class wins.

    Read this thread to see why - http://www.sitepoint.com/forums/show...ss+specificity. There's an infographic I linked there which makes it easier to remember what wins.....
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  3. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Can't believe Ive never noticed this before. Maybe I forgot it. Either way its surprising to me. I feed my pre rules like this. #code pre. The code id on the body. I went to override the pre and put in some rules in the head a the doc like pre {...} without the id. Surprising to me it did not override it unless I included the id before hand. I would of thought the head trumped the id. Wrong obviously.

    On a side note I am going to try only classes with my next project and no ids and see how it goes. I bet head would trump .class element {...}.
    What you might be thinking of is that inline styles trump stylesheet rules, so <p style="color:red;"> would always be red, whatever the stylesheets say.

    I have seen some references that say that embedded stylesheets (ie, those in the <head>) trump linked stylesheets. That isn't the case. The reason why people sometimes think it is the case is because they always have the <link> tags before the <style> tags (although there's no reason why you have to do this). The rules of specificity say that if the number of ID selectors is equal and the number of class selectors is equal and the number of element selectors is equal, the rule that comes second wins. And the order that they are dealt with is that the first <link> or <style> element comes first, and then in order. If you have any @import rules in your CSS, the imported file is treated as being inserted at that point.

    But that is all on the basis of the selectors being equal. When they aren't, the normal rules of specificity apply, regardless of whether the declaration is in an embedded, linked or imported stylesheet.

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Basically I miss the interaction I had in the forums. Because my questions are not so frequent, now I just post my occasional findings in hopes they spark a mindful convo lol. At least if that's what someone asked that's how I'd answer after giving it some thought. I had a lot of consoling when I was young. I'm real good like at expressing myself. Funny though that doesn't translate to my wife lol2.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •