CSS Specificity Practice Questions with Solutions

Introduction

CSS specificity is the set of rules browsers use to decide which CSS style should be applied when multiple rules target the same HTML element. Selectors with higher specificity override those with lower specificity. Understanding specificity helps you avoid styling conflicts and write cleaner, more maintainable CSS. In this chapter, you’ll practice CSS specificity through simple solved CSS Specificity practice questions that are easy for beginners to understand.

Question 1: Class Selector vs Element Selector

Problem Statement

A paragraph (<p>) has both of the following CSS rules. Which rule will be applied?

CSS Code

p {    color: blue;}.text {    color: red;}

Output

The paragraph text appears red.

Explanation

• A class selector has higher specificity than an element selector.
• .text overrides the p selector.
• The class style is applied.

Question 2: ID Selector vs Class Selector

Problem Statement

A <div> matches both selectors below. Which text color is applied?

CSS Code

.box {    color: green;}#content {    color: purple;}

Output

The text appears purple.

Explanation

• An ID selector has higher specificity than a class selector.
• #content overrides .box.
• The ID style is applied.

Question 3: Inline Style vs External CSS

Problem Statement

Which style has higher priority: an inline style or a CSS rule?

CSS Code

p {    color: blue;}

Output

If the paragraph contains an inline style such as style="color:red;", the text appears red.

Explanation

• Inline styles have higher specificity than normal CSS rules.
• The inline style overrides the external or internal stylesheet.
• Inline styles should be used sparingly.

Question 4: Two Element Selectors

Problem Statement

Two CSS rules use the same element selector. Which one is applied?

CSS Code

h1 {    color: blue;}h1 {    color: orange;}

Output

The heading appears orange.

Explanation

• Both selectors have the same specificity.
• When specificity is equal, the last rule is applied.
• CSS follows the “last declaration wins” rule.

Question 5: Class Selector vs Multiple Element Selectors

Problem Statement

A paragraph matches both CSS rules below. Which style is applied?

CSS Code

divp {    color: blue;}.highlight {    color: red;}

Output

The paragraph text appears red.

Explanation

• The class selector has higher specificity than element-based selectors.
• .highlight overrides div p.
• The class rule is applied.

Question 6: Multiple Classes vs Single Class

Problem Statement

A <div> matches both selectors below. Which background color is applied?

CSS Code

.box {    background-color: lightblue;}.box.primary {    background-color: lightgreen;}

Output

The <div> displays a light green background.

Explanation

• .box.primary contains two class selectors.
• It has higher specificity than .box.
• Therefore, the light green background is applied.

Question 7: ID Selector with Element Selector

Problem Statement

A heading matches both selectors below. Which color is applied?

CSS Code

h2 {    color: blue;}h2#title {    color: crimson;}

Output

The heading displays crimson text.

Explanation

• h2#title includes both an element selector and an ID selector.
• The ID selector gives it higher specificity.
• Therefore, the crimson color is applied.

Question 8: Universal Selector vs Class Selector

Problem Statement

Which font size is applied when both selectors target the same element?

CSS Code

* {    font-size: 14px;}.text {    font-size: 18px;}

Output

The element displays a font size of 18px.

Explanation

• The universal selector (*) has the lowest specificity.
• The class selector has higher specificity.
• Therefore, the class rule overrides the universal selector.

Question 9: Understanding !important

Problem Statement

Which text color is applied when one CSS rule uses !important?

CSS Code

p {    color: blue;}p {    color: red!important;}

Output

The paragraph text appears red.

Explanation

• !important gives the declaration the highest priority among normal author rules.
• It overrides other declarations with lower priority.
• It should be used only when absolutely necessary to avoid making CSS harder to maintain.

Question 10: Specificity Order Summary

Problem Statement

Arrange the following selectors from lowest to highest specificity.

CSS Code

* { }p { }.note { }#header { }style="color: blue;"

Output

Specificity order:

Universal Selector↓Element Selector↓Class Selector↓ID Selector↓Inline Style

Explanation

• Universal selectors have the lowest specificity.
• Element selectors override universal selectors.
• Class selectors override element selectors.
• ID selectors override class selectors.
• Inline styles have the highest specificity among these selectors.

Key Takeaways

• CSS specificity determines which rule is applied when multiple rules target the same element.
• Universal selectors have the lowest specificity.
• Element selectors have lower specificity than class selectors.
• Class selectors have lower specificity than ID selectors.
• Inline styles have higher specificity than normal CSS selectors.
• When two rules have the same specificity, the last declared rule is applied.
• Use !important carefully, as it overrides normal specificity and can make CSS harder to manage.

Frequently Asked Questions (FAQs)

1. What is CSS specificity?

CSS specificity is the rule browsers use to decide which CSS declaration should be applied when multiple selectors target the same element.

2. Which selector has the highest specificity?

Among common selectors, inline styles have the highest specificity.

3. Which selector has the lowest specificity?

The universal selector (*) has the lowest specificity.

4. Does an ID selector have higher specificity than a class selector?

Yes. An ID selector always has higher specificity than a class selector.

5. What happens if two selectors have the same specificity?

The rule that appears later in the stylesheet is applied.

6. What does !important do?

!important gives a declaration higher priority than normal CSS declarations. It should be used only when necessary because excessive use makes stylesheets difficult to maintain.

7. What is the specificity order in CSS?

The specificity order from lowest to highest is:

• Universal Selector (*)
• Element Selector
• Class Selector
• ID Selector
• Inline Style

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Rishabh Kumar