• Hajipur, Bihar, 844101

☰
❮
❯

CSS

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

CSS Specificity

← Previous Next →

🔹 What Is CSS Specificity?

CSS Specificity determines which CSS rule is applied when multiple rules target the same element. It defines the priority of a selector.

If multiple styles apply to the same element, the browser uses the rule with the highest specificity value.

🔸 1. Specificity Hierarchy (from lowest to highest)

Selector Type Specificity Value
Universal (*) 0,0,0
Element (div, p) 0,0,1
Class (.class) 0,1,0
Attribute ([type]) 0,1,0
Pseudo-class (:hover) 0,1,0
ID (#id) 1,0,0
Inline styles 1,0,0 (but higher priority)
!important Overrides all (but avoid overuse)

🔸 2. Example: Basic Specificity Comparison

p {
  color: blue;       /* Specificity: 0,0,1 */
}

.text {
  color: green;      /* Specificity: 0,1,0 */
}

#main {
  color: red;        /* Specificity: 1,0,0 */
}

Final color: red due to higher specificity of #main.

🔸 3. How Specificity Is Calculated

Example:

div#main .text:hover {
  color: orange;
}

Breakdown:

  • ID selector → 1

  • Class + Pseudo-class → 2

  • Element → 1

Specificity: 1,2,1

🔸 4. Inline Styles & !important

Inline style:

<p style="color: purple;">Hello</p>

Inline styles have very high specificity: 1,0,0

Use of !important:

p {
  color: orange !important;
}

Overrides all other rules, even if specificity is lower.

🔸 5. Equal Specificity – Which One Wins?

If specificity is the same, the later rule in the CSS file wins.

p {
  color: red;
}

p {
  color: green;
}

Final color: green (last rule wins)

Practice Questions

Q1. Set color using an element selector (h1).

Q2. Override with a class selector (.title).

Q3. Override again using an ID selector (#heading).

Q4. Use an inline style to set background color.

Q5. Add !important to a font-size rule.

Q6. Use both class and pseudo-class in a selector.

Q7. Add an attribute selector to style checkboxes.

Q8. Write a selector that combines element + ID + class.

Q9. Add multiple conflicting styles and determine which wins.

Q10. Use same specificity in two rules and reorder to test precedence.

CSS Specificity Quiz

Q1: Which selector has the highest specificity?

A. .title
B. p
C. #main
D. *

Q2: What does !important do?

A. Adds styling priority randomly
B. Forces rule to override all others
C. Ignores the rule
D. Hides the element

Q3: What is the specificity of div.article .highlight?

A. 0,0,2
B. 0,1,2
C. 1,1,1
D. 1,0,2

Q4: Which style will be applied if all have the same specificity?

A. The first one
B. The last one declared
C. The one with !important
D. None

Q5: Which selector has specificity 1,0,0?

A. p
B. #header
C. .btn
D. input[type="text"]

Q6: What is the specificity of input[type="text"]?

A. 0,0,1
B. 0,1,1
C. 1,1,0
D. 0,2,0

Q7: What is the specificity of an inline style?

A. 0,0,0
B. 0,1,0
C. 1,0,0
D. 1,1,1

Q8: Which of the following is the most specific?

A. a:hover
B. #menu
C. .menu
D. nav a

Q9: If h1 and .title both style the same element, which wins?

A. h1
B. .title
C. Depends on browser
D. Randomly chosen

Q10: Which selector has the lowest specificity?

A. *
B. .class
C. #id
D. [type="text"]
← Previous Next →
Login
Go Back Top