| Interactive Media Design

Specificity and Order of Appearance

Specificity is how browsers further determine which style declarations are applied by prioritizing the most relevant style to an element.

Calculating Specificity

Specificity is calculated by assigning a heavier weight to those selectors that are more specific in nature.

  • Tag-name or type selectors are not very specific. A website could have hundreds of <p> tags embedded in it making it difficult to target selected groups of them.
  • The class attribute increases specificity by targeting subsets of elements that have common styling rules beyond the element selector.
  • The id attribute of an element should be unique within a website making it very specific giving it the highest priority.
  • Finally, if an element has inline styling <p style=“color: brown”> it automatically overrides all others.

Where specificity is determined to be equal between two competing declaration, the last declaration wins.

To calculate specificity, we count the occurrences of each selector and order them from highest to lowest using the following formula:

inline-style id class tag-name

Examples

Given the following html:

<p class=“yellow”>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
    industry’s
    standard dummy text ever since the 1500s.</p>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s
    standard dummy text ever since the 1500s.</p>

<div>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s
        standard dummy text ever since the 1500s.</p>

    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s
        standard dummy text ever since the 1500s.</p>

    <p class=“yellow”>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
        the industry’s
        standard dummy text ever since the 1500s.</p>

    <p class=“yellow” id=“green”>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
        has been the industry’s
        standard dummy text ever since the 1500s.</p>

    <p class=“yellow” id=“blue”>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
        has been the industry's
        standard dummy text ever since the 1500s.</p>

    <p class="yellow" id="purple" style="color: darkmagenta;">Lorem Ipsum is simply dummy text of the printing and
        typesetting industry. Lorem Ipsum
        has been the industry's
        standard dummy text ever since the 1500s.</p>
</div>

Element Selector

/* Specificity of 0001 */
p {
    color: red;
}

/* Specificity of 0002 */
div>p {
    color: burlywood;
}

Class and id selectors

/* Specificity of 0010 */
.yellow {
    color: yellow;
}

/* Specificity of 0100 */
#green {
    color: green;
}

Style attribute

This wins over all others!

<p class="yellow" id="purple" style="color: darkmagenta;">Lorem Ipsum is simply dummy text of the printing and
        typesetting industry. Lorem Ipsum
        has been the industry's
        standard dummy text ever since the 1500s.</p>

Mixing it up

/* Specificity of 0001 */
p {
    color: red;
}

/* Specificity of 0002 */
div>p {
    color: burlywood;
}

/* Specificity of 0010 */
.yellow {
    color: yellow;
}

/* Specificity of 0100 */
#green {
    color: green;
}

/* Specificity of 0100 */
#blue {
    color: blue;
}

/* Specificity of 0100 */
#purple {
    color: purple;
}

/* Specificity of 0012 */
div>p.yellow {
    color: rgb(80, 80, 14);
}

Download the source file here

Further Review

See Also