CSS Specificity

0

Posted by tadhg88

Category :

Time: 1:10 PM

If you have two (or more) conflicting CSS rules that point to the same element, there are some basic rules that a browser follows to determine which one is most specific and therefore wins out.
  1. If the selectors are the same then the latest one will always take precedence.
  2. The more specific a selector, the more preference it will be given when it comes to conflicting styles.
  3. The embedded style sheet has a greater specificity than other rules.

Specificity hierarchy

Every selector has its place in the specificity hierarchy. There are four distinct categories which define the specificity level of a given selector:
  1. Inline styles (Presence of style in document).
    An inline style lives within your XHTML document. It is attached directly to the element to be styled. E.g. <h1 style="color: #fff;">
  2. IDs (# of ID selectors)
    ID is an identifier for your page elements, such as #div.
  3. Classes, attributes and pseudo-classes (# of class selectors).
    This group includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.
  4. Elements and pseudo-elements (# of Element (type) selectors).
    Including for instance :before and :after.
The actual specificity of a group of nested selectors takes some calculating. Basically, you give every id selector ("#whatever") a value of 100, every class selector (".whatever") a value of 10 and every HTML selector ("whatever") a value of 1. Then you add them all up and hey presto, you have the specificity value.
  • p has a specificity of 1 (1 HTML selector)
  • div p has a specificity of 2 (2 HTML selectors; 1+1)
  • .tree has a specificity of 10 (1 class selector)
  • div p.tree has a specificity of 12 (2 HTML selectors and a class selector; 1+1+10)
  • #baobab has a specificity of 100 (1 id selector)
  • body #content .alternative p has a specificity of 112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1)
So if all of these examples were used, div p.tree (with a specificity of 12) would win out over div p (with a specificity of 2) and body #content .alternative p would win out over all of them, regardless of the order.

What is what


  • A selector is the element that is linked to a particular style. E.g. p in
    p { padding: 10px; }



  • A class selector is a selector that uses a defined class (multiple per page). E.g. p.section in
    p.section { padding: 10px; }




  • An ID selector is a selector that uses an individually assigned identifier (one per page). E.g. p#section in
    #section { padding: 10px; }
    (X)HTML: <p id="section">Text</>




  • A contextual selector is a selector that defines a precise cascading order for the rule. E.g. p span in
    p span { font-style: italic; }

    defines that all span-elements within a p-element should be styled in italics.





  • An attribute selector matches elements which have a specific attribute or its value. E.g. p span in

    p[title] { font-weight: bold; }

    matches all p-elements which have a title attribute.





  • Pseudo-classes are special classes that are used to define the behavior of HTML elements. They are used to add special effects to some selectors, which are applied automatically in certain states. E.g. :visited in

    a:visited {
text-decoration: underline; 
}





  • Pseudo-elements provide designers a way to assign style to content that does not exist in the source document. Pseudo-element is a specific, unique part of an element that can be used to generate content “on the fly”, automatic numbering and lists. E.g. :first-line or :after in

    p:first-line {
font-variant: small-caps; 
}
a:link:after { content: " (" attr(href) ")"; }




    • My thanks to
    http://htmldog.com/guides/cssadvanced/specificity/
    http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/


    Future reading:
    Inheritance
    http://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/

    0 comments:

    Post a Comment

    Subscribe to: Post Comments (Atom)