CSS Questions & Answers – Specificity and Importance

CSS Multiple Choice Questions & Answers (MCQs) focuses on “Specificity and Importance”.

Find the specificity of the statments using the rule given below.
A selector’s specificity is calculated as follows:
1) count 1 if the declaration is from is a ‘style’ attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element’s “style” attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
2) count the number of ID attributes in the selector (= b)
3) count the number of other attributes and pseudo-classes in the selector (= c)
4) count the number of element names and pseudo-elements in the selector (= d)

Q 1. Find the specificity of this “*”.
A. specificity = 0,0,0,0
B. specificity = 0,0,0,1
C. specificity = 0,0,1,0
D. specificity = 1,0,0,0

Show Answer

Answer:-A. specificity = 0,0,0,0

Q 2. Find the specificity of this “li”.
A. specificity = 0,0,0,1
B. specificity = 0,0,1,1
C. specificity = 0,1,1,1

Show Answer

Answer:-A. specificity = 0,0,0,1

Q 3. Find the specificity of this ” ul li”.
A. specificity = 0,0,0,0
B. specificity = 0,0,1,2
C. specificity = 0,0,0,2
D. specificity = 2,0,0,0

Show Answer

Answer:-C. specificity = 0,0,0,2

Q 4. Find the specificity of this “li:first-line”.
A. specificity = 0,0,1,1
B. specificity = 0,0,0,2
C. specificity = 0,1,0,1
D. specificity = 1,0,0,1

Show Answer

Answer:-B. specificity = 0,0,0,2

Q 5. Find the specificity of this “ul ol+li”.
A. specificity = 0,0,2,1
B. specificity = 0,2,1,1
C. specificity = 0,1,1,1
D. specificity = 0,0,0,3

Show Answer

Answer:-D. specificity = 0,0,0,3

Q 6. Find the specificity of this “ul ol li.red”.
A. specificity = 0,0,3,1
B. specificity = 0,0,1,3
C. specificity = 1,1,1,1
D. specificity = 1,2,2,1

Show Answer

Answer:-B. specificity = 0,0,1,3

Q 7. Find the specificity of this “ul ol li.red”.
A. specificity = 0,0,1,3
B. specificity = 0,0,0,4
C. specificity = 0,1,2,1
D. specificity = 1,1,1,1

Show Answer

Answer:-A. specificity = 0,0,1,3

Q 8. Find the specificity of this “li.red.leve”.
A. specificity = 2,0,0,1
B. specificity = 0,0,1,1
C. specificity = 0,2,0,1
D. specificity = 0,0,2,1

Show Answer

Answer:-D. specificity = 0,0,2,1

Q 9. Find the specificity of this “#x34y”.
A. specificity = 0,0,0,1
B. specificity = 0,0,1,0
C. specificity = 0,1,0,0
D. specificity = 1,0,0,0

Show Answer

Answer:-C. specificity = 0,1,0,0

Q. 10. Find the specificity of this ” style=”” “.
A. specificity = 0,0,0,1
B. specificity = 0,0,1,0
C. specificity = 0,1,0,0
D. specificity = 1,0,0,0

Show Answer

Answer:-D. specificity = 1,0,0,0

Q 11. Which of the following CSS selectors has the highest specificity?

A. p

B. .my-class

C. #my-id

D. *

Show Answer

Answer:-C. #my-id

Explanation

Specificity is a scoring system.

* (universal selector): 0,0,0,0

p (element selector): 0,0,0,1

.my-class (class selector): 0,0,1,0

#my-id (ID selector): 0,1,0,0 ID selectors have a higher specificity score than class or element selectors.

Q 12. Consider the following CSS rules:

CSS

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

And the following HTML:

HTML

<p class="text">Hello World</p>

What color will “Hello World” be?

A. Red

B. Blue

C. Black (default)

D. Undefined

Show Answer

Answer:-B. Blue

Explanation

The .text class selector (specificity 0,0,1,0) has higher specificity than the p element selector (specificity 0,0,0,1). Therefore, the color: blue; rule will be applied.

Q 13: Which of the following generally has the highest priority in CSS when !important is not used?

A. Inline styles

B. External stylesheets

C. Internal stylesheets

D. User agent stylesheet

Show Answer

Answer:-A. Inline styles

Explanation

Without !important, the order of priority from highest to lowest is generally:

1. Inline styles (specificity is very high, effectively 1,0,0,0)

2. ID selectors

3. Class, pseudo-class, attribute selectors

4. Element and pseudo-element selectors

5. Universal selector

6. Inherited values

While external and internal stylesheets can contain rules with varying specificity, inline styles directly on the HTML element have the highest specificity by default among the given options.

Q 14: What is the primary purpose of the !important declaration in CSS?

A. To make a rule less specific

B. To force a rule to be applied regardless of specificity

C. To define a new CSS property

D. To only apply a style in specific browsers

Show Answer

Answer:-B. To force a rule to be applied regardless of specificity

Explanation

The !important declaration gives a CSS property absolute precedence over all other declarations, including those with higher specificity, unless another !important rule with higher importance (e.g., from a user stylesheet) or a later !important rule from the same origin is applied. It essentially overrides the normal specificity cascade.

Q 15. Consider the following CSS rules:

CSS

#header p {
    font-size: 16px;
}

div p {
    font-size: 18px;
}

And the following HTML:

HTML

<div id="header">
    <p>This is a paragraph.</p>
</div>

What will be the font-size of the paragraph?

A. 16px

B. 18px

C. Default browser font-size

D. Undefined

Show Answer

Answer:-A. 16px

Explanation

Q 16. When two CSS rules have the exact same specificity, which one will be applied?

A. The rule that comes first in the stylesheet.

B. The rule that comes last in the stylesheet.

C. Neither, it will default to the browser’s style.

D. It’s a random choice by the browser.

Show Answer

Answer:-B. The rule that comes last in the stylesheet.

Explanation

If two rules have the same specificity, the one that is declared last in the stylesheet (or the one that is parsed last by the browser) will take precedence. This is often referred to as the “source order” or “order of appearance” rule.

Q17. Which of the following is the correct order of increasing specificity?

A. Element selector, Class selector, ID selector, Inline style

B. ID selector, Class selector, Element selector, Inline style

C. Universal selector, ID selector, Class selector, Inline style

D. Inline style, ID selector, Class selector, Element selector

Show Answer

Answer:-A. Element selector, Class selector, ID selector, Inline style

Explanation

Q 18. You have the following HTML:

HTML

<div style="color: green;">
    <p id="myParagraph" class="text-color">Hello</p>
</div>

And the following CSS:

CSS

#myParagraph { color: blue !important; }
.text-color { color: red; }
div p { color: yellow; }

What color will “Hello” be?

A. Green

B. Blue

C. Red

D. Yellow

Show Answer

Answer:-B. Blue

Explanation