EN/CH Mode

BRUCE_FE CSS Interview Notes - CSS Selector Specificity

Deep understanding of CSS selector specificity calculation rules, weight comparison methods, mastering the differences between type selectors, ID selectors, inline styles, and other specificity levels to easily solve style conflict problems.

EN/CH Mode

Lazy to read articles? Then watch videos!

What is CSS Selector Specificity?

CSS selector specificity is the mechanism by which browsers determine which CSS rules apply to elements. When multiple rules set different values for the same property of the same element, selectors with higher specificity will override selectors with lower specificity.

The priority order from high to low is as follows:

1.
!important declaration
Overrides all other styles, ignoring normal specificity calculation
2.
Inline styles
Using style attribute directly on HTML elements
3.
ID selectors
Selectors using # identifier
4.
Class selectors, attribute selectors, pseudo-class selectors
.class, [attr], :hover, etc.
5.
Element selectors, pseudo-element selectors
div, p, ::before, etc.
6.
Source order
If specificity is exactly the same, later rules override earlier ones

Simple Specificity Example

/* Lowest specificity */
p {
  color: black;
}

/* Higher than element selector */
.text {
  color: blue;
}

/* Higher than class selector */
#title {
  color: green;
}

/* Higher than ID selector */
<p style="color: purple;">Inline style</p>

/* Highest priority, overrides everything */
p {
  color: red !important;
}

Specificity Comparison of Same-name Selectors

/* When there are multiple selectors of the same type, later ones override earlier ones */
.button {
  background-color: blue;
}

/* This will override the above style because it appears later in source code */
.button {
  background-color: green;
}

/* But if selectors have different specificity, higher specificity wins */
.nav .button {
  background-color: red;  /* This will take effect because it has two class selectors */
}

.button {
  background-color: yellow;  /* Even though it appears later, it won't override the above style */
}

/* Same applies to ID selectors */
#header {
  border: 1px solid gray;
}

/* This will override the above border style */
#header {
  border: 2px solid black;
}

/* But selector combinations with higher specificity will win */
body #header {
  border: 3px solid red;  /* This will take effect because it has element+ID selector */
}

🔥 Common Interview Questions

(1) Simply determine whether the following CSS rules will be overridden

/* Rule A */
.sidebar .menu-item {
  color: blue;
}

/* Rule B */
div.sidebar ul li.menu-item {
  color: red;
}

/* Rule C */
#sidebar .menu-item {
  color: green;
}

/* Rule D */
.sidebar .menu-item:hover {
  color: yellow;
}

Answer:

1. Rule B will override Rule A because B has more selectors (3 element selectors + 1 class selector vs 1 class selector)
2. Rule C will override Rules A and B because C contains an ID selector, highest specificity
3. Rule D won't directly override other rules because it targets hover state, only effective when mouse hovers
4. When element is in hover state, Rule D will override Rule A, but won't override Rule C (ID selector specificity higher than pseudo-class)

(2) Determine the priority order of the following selectors (from high to low)

a. p.content
b. p[class="content"]
c. #main p
d. body #main p.content
e. p.content.active

Answer: Priority order from high to low:

d. body #main p.content - Contains ID selector, highest specificity
c. #main p - Also contains ID selector, but fewer total selectors than d
e. p.content.active - Contains multiple class selectors
a. p.content - Contains one class selector
b. p[class='content'] - Attribute selector has same specificity as class selector

Remember: ID selectors > Class selectors/Attribute selectors/Pseudo-classes > Element selectors/Pseudo-elements

(3) When to use !important, advantages and disadvantages

Answer:

When to Use	Advantages	Disadvantages
1. Override third-party CSS libraries 2. Implement accessibility features 3. Print stylesheets	1. Can override any specificity 2. Solve style conflicts	1. Breaks cascade characteristics 2. Difficult to maintain

Practical Example:

/* Third-party library styles */
.btn {
  background-color: blue;
}

/* Our override styles */
.btn.primary {
  background-color: red !important; /* Ensure our red button isn't overridden */
}

/* Accessibility styles */
.high-contrast-mode .btn {
  background-color: black !important;
  color: white !important;
}

Best practice: Treat !important as a last resort, prioritize using more specific selectors to solve specificity issues.