Specificity in CSS - arguments.callee

Specificity in CSS

Ever wonder why some styles don't seem to get applied to your pages? Ever come across (or produce) a stylesheet littered with !important declarations? The reason is likely selector specificity. Specificity in CSS is how browsers determine which rules should be applied to a webpage. If two selectors can point to the same HTML element, the rule with the higher specificity is applied.

    div {
        width: 200px; /* less specific */
    }
    div.someClass {
        width: 300px; /* more specific */
    }
    div#someID {
        width: 400px; /* most specific */
    }

Element selectors (div) are considered the least specific, because there could be any number of matching elements on a page.
Class selectors (div.someClass) are more specific. If you have 10 divs on a page, it is likely that fewer than 10 will be assigned .someClass — if you find otherwise it may be time to start your stylesheet over!
ID selectors (div#someID) are the most specific, because by definition there should be only one of a given ID on the page. Browsers tend not to enforce that rule, but the results of assigning one ID to more than one element can be unpredictable.

A common recommendation is to create the least specific selectors to reach an element. For example:

    <html>
      <body>
       <div id="navigation">
        <ul class="links">
         <li><a>home</a></li>
         <li><a>...</a></li>
        </ul>
       </div>
      </body>
    </html>

    div#navigation ul.links li a {
        /* very specific! :(
         *  - hard to override if necessary
         *  - if we rearrange the HTML, we probably have to revise this CSS as well.
         */
    }
    ul.links a {
        /* much less specific :)
         *  - points to the same elements
         *  - we can move ul.links anywhere on the page and this rule will still work.
         *  - saves bandwidth, especially with long stylesheets
         */
    }

Attribute selectors (input[type=submit]) are grouped with class selectors when it comes to specificity. The official CSS documentation describes a more complex calculation, but if you keep in mind the relative weight of element, class, and ID selectors you should be able to assign styles using more efficient and effective rules.

Tags

arguments.callee web design & development blog