CSS Interview Questions

28 Questions
HTML & CSS

HTML & CSS

Web DevelopmentFrontend

Question 11

Explain the concept of specificity in CSS.

Answer:

Specificity in CSS refers to the rules that determine which styles are applied to an element when multiple conflicting CSS rules could apply. It’s a crucial concept for resolving conflicts between different styles, ensuring that the most relevant styles are applied to the correct elements.

How Specificity is Calculated

Specificity is calculated based on the types of selectors used in a CSS rule. The more specific a selector, the higher its specificity, and thus the more likely it is to be applied over other, less specific rules.

Specificity is generally calculated using the following categories:

  1. Inline Styles: These have the highest specificity.
  2. IDs: These are more specific than classes and attributes.
  3. Classes, Attributes, and Pseudo-Classes: These are more specific than element selectors.
  4. Element Selectors and Pseudo-Elements: These have the lowest specificity.

Specificity Value

Specificity is usually represented as a four-part value: (a, b, c, d), where:

  • a: Inline styles (style attribute in HTML).
  • b: Number of ID selectors.
  • c: Number of class selectors, attribute selectors, and pseudo-classes.
  • d: Number of element selectors and pseudo-elements.

Specificity Calculation Examples

Let's look at some examples to better understand how specificity is calculated:

  1. Inline Style

    • Example: <div style="color: red;"></div>
    • Specificity: (1, 0, 0, 0)
    • Inline styles override all other styles.

  2. ID Selector

    • Example: #header { color: blue; }
    • Specificity: (0, 1, 0, 0)
    • ID selectors are very specific and override class and element selectors.

  3. Class Selector

    • Example: .nav-item { color: green; }
    • Specificity: (0, 0, 1, 0)
    • Class selectors are less specific than ID selectors but more specific than element selectors.

  4. Element Selector

    • Example: p { color: black; }
    • Specificity: (0, 0, 0, 1)
    • Element selectors have the lowest specificity.

  5. Combination of Selectors

    • Example: #header .nav-item p { color: yellow; }
    • Specificity: (0, 1, 1, 1)
    • This selector combines an ID, a class, and an element selector, making it quite specific.

Specificity in Action

Consider the following HTML and CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        p {
            color: black; /* Specificity: (0, 0, 0, 1) */
        }

        .highlight {
            color: green; /* Specificity: (0, 0, 1, 0) */
        }

        #intro {
            color: blue; /* Specificity: (0, 1, 0, 0) */
        }

        p.highlight {
            color: orange; /* Specificity: (0, 0, 1, 1) */
        }

        div p {
            color: red; /* Specificity: (0, 0, 0, 2) */
        }
    </style>
    <title>Specificity Example</title>
</head>
<body>
    <div id="intro" class="highlight">
        <p>This paragraph will have a specific color.</p>
    </div>
</body>
</html>

Which Color Will the Paragraph Be?

  • The p element inside the div has several styles that could apply:
    • p { color: black; } - Specificity: (0, 0, 0, 1)
    • .highlight { color: green; } - Specificity: (0, 0, 1, 0)
    • #intro { color: blue; } - Specificity: (0, 1, 0, 0)
    • p.highlight { color: orange; } - Specificity: (0, 0, 1, 1)
    • div p { color: red; } - Specificity: (0, 0, 0, 2)

The winning rule is p.highlight { color: orange; }, with a specificity of (0, 0, 1, 1), because it has the highest specificity that applies directly to the p element, considering its class and element combination.

Important Points About Specificity

  1. Higher Specificity Wins: When multiple rules apply to the same element, the rule with the higher specificity value wins.

  2. Inline Styles Override Everything: Inline styles (specified in the style attribute) have the highest specificity and will override any styles defined in external or internal stylesheets, regardless of their specificity.

  3. ID Selectors Are More Specific Than Classes: A single ID selector is more specific than any combination of class and element selectors.

  4. Multiple Selectors Add Up: The specificity of a combined selector is the sum of the specificity of its individual components.

  5. Use Specificity Carefully: Overusing high-specificity selectors can make your CSS difficult to maintain. It’s usually better to rely on low-specificity selectors and use classes effectively.

Summary

Specificity in CSS is a mechanism that determines which styles are applied to an element when multiple rules could apply. It's calculated based on the types of selectors used and helps resolve conflicts between different styles. Understanding specificity is key to writing effective and maintainable CSS.

Recent job openings