SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Mar 2004
    Location
    Oslo, Norway
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    In what order is styles applied?

    I've always tought that css rules is applied in the order they are defined in an external style sheet file or in the <style> tag, but then I ran into a problem where a generic class that sets the font color wasn't applied to an element inside a div with an id.

    Could anyone explain to me why the 4. anchor in this example isn't blue like the 2. anchor that has the same class?

    Example

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Its all do with specifity and weight.

    To overide the id you will need to be more specific.
    Code:
    div#myblock a.myclass  { color:#00f; }
    This style is more specific div#myblock a { color:#0f0; } and targets a elements with more weight than a simple class like a.myclass { color:#00f;}.

    Therefore you have to use make your targetting morw specific. Id's carry more weight than classes and there is an algotithm used to determine which style is applied and the more specific you make the targetting then the higher the weighting of the style.

    See here for more info:

    http://www.meyerweb.com/eric/css/link-specificity.html

    Paul

  3. #3
    SitePoint Member
    Join Date
    Mar 2004
    Location
    Oslo, Norway
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, that'll help me fix things.


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
  •