CSS Specificity and Inheritance Quiz

Create an account and save your quiz results

Login and save your results

OR

Question 1/15

What sets the specificity of 
#main > .container > li:hover
?

Select your answer

Question 2/15

What specificity would result from applying multiple IDs to a single element in a selector 
#menu #nav .item
?

Select your answer

Question 3/15

What is the specificity score for this rule: 
nav.menu > ul > li.current::after
?

Select your answer

Question 4/15

Given CSS code: 
div#wrap > .content img:hover
, what specificity does this represent?

Select your answer

Question 5/15

If an element has styles coming from three classes: 
.class1, .class2, .class3
, which one will apply if none of the classes have conflicting properties?

Select your answer

Question 6/15

Which of the following does not contribute to specificity in CSS?

Select your answer

Question 7/15

What specificity score does 
#content .section > h2.title:first-letter
yield?

Select your answer

Question 8/15

Which of these has no effect on specificity?

Select your answer

Question 9/15

Which statement is correct about inline styles and specificity?

Select your answer

Question 10/15

Given CSS with conflicts, 
article section p { color: red; }
and 
section > p { color: blue; }
, which color will the p have?

Select your answer

Question 11/15

Which rule type is generally not affected by inheritance?

Select your answer

Question 12/15

If two selectors have the same specificity, which rule will take precedence?

Select your answer

Question 13/15

In the context of CSS inheritance, which of the following properties will NOT be inherited by default?

Select your answer

Question 14/15

How would you resolve a specificity conflict if both 
#main p
and 
.important p
are setting styles for the same element?

Select your answer

Question 15/15

A selector 
#box div::after:hover
has which specificity score?

Select your answer

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/15
😊 Your answer was correct 🙁 Your answer was incorrect
What sets the specificity of <pre><code>#main > .container > li:hover</code></pre>?

Available answers

The specificity is based on one ID (#main), no classes, and one pseudo-class (:hover). The element selectors (li and .container) add no additional specificity since they aren't relevant like ID and class.
Question 2/15
😊 Your answer was correct 🙁 Your answer was incorrect
What specificity would result from applying multiple IDs to a single element in a selector <pre><code>#menu #nav .item</code></pre>?

Available answers

The specificity is (2,0,1,0) due to two IDs (#menu and #nav) and one class (.item).
Question 3/15
😊 Your answer was correct 🙁 Your answer was incorrect
What is the specificity score for this rule: <pre><code>nav.menu > ul > li.current::after</code></pre>?

Available answers

The specificity here is (0,2,1,2): one class, one element, two pseudo-elements (making it count in pseudo-class category as considered collectively here with classes).
Question 4/15
😊 Your answer was correct 🙁 Your answer was incorrect
Given CSS code: <pre><code>div#wrap > .content img:hover</code></pre>, what specificity does this represent?

Available answers

This specificity is (1,1,0,1) due to 1 ID, 1 class, 1 pseudo-class.
Question 5/15
😊 Your answer was correct 🙁 Your answer was incorrect
If an element has styles coming from three classes: <pre><code>.class1, .class2, .class3</code></pre>, which one will apply if none of the classes have conflicting properties?

Available answers

All non-conflicting styles from .class1, .class2, and .class3 will be applied due to the cascade and non-conflict nature.
Question 6/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which of the following does not contribute to specificity in CSS?

Available answers

!important affects rule precedence globally but does not influence the calculation of specificity itself.
Question 7/15
😊 Your answer was correct 🙁 Your answer was incorrect
What specificity score does <pre><code>#content .section > h2.title:first-letter</code></pre> yield?

Available answers

The specificity is (1,0,2,2). It has 1 ID (#content), 2 class names (.section and .title), 1 element (h2), and 1 pseudo-element (:first-letter).
Question 8/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which of these has no effect on specificity?

Available answers

The universal selector (*) doesn't contribute to the specificity weight of a rule. The specificity calculation does not include universal selectors.
Question 9/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which statement is correct about inline styles and specificity?

Available answers

Inline styles have the highest specificity (considered (1,0,0,0)), which overrides most other CSS rules.
Question 10/15
😊 Your answer was correct 🙁 Your answer was incorrect
Given CSS with conflicts, <pre><code>article section p { color: red; }</code></pre> and <pre><code>section > p { color: blue; }</code></pre>, which color will the <code>p</code> have?

Available answers

The rule article section p has a specificity of (0,0,0,3), higher than section > p's specificity of (0,0,0,2).
Question 11/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which rule type is generally not affected by inheritance?

Available answers

Box model properties like margin, padding, and borders are not inheritable, whereas font and color properties typically are.
Question 12/15
😊 Your answer was correct 🙁 Your answer was incorrect
If two selectors have the same specificity, which rule will take precedence?

Available answers

When two selectors have the same specificity, the CSS rules are compared by the order they appear in the stylesheet, with the latter one taking precedence.
Question 13/15
😊 Your answer was correct 🙁 Your answer was incorrect
In the context of CSS inheritance, which of the following properties will NOT be inherited by default?

Available answers

CSS properties like border are not inherited by default because they do not naturally cascade like text-related properties such as color or font-size.
Question 14/15
😊 Your answer was correct 🙁 Your answer was incorrect
How would you resolve a specificity conflict if both <pre><code>#main p</code></pre> and <pre><code>.important p</code></pre> are setting styles for the same element?

Available answers

The selector .important p can employ !important to override the specificity of the ID-based selector #main p.
Question 15/15
😊 Your answer was correct 🙁 Your answer was incorrect
A selector <pre><code>#box div::after:hover</code></pre> has which specificity score?

Available answers

The specificity is (1,0,1,2) with 1 ID, 1 element, and 2 pseudo-elements/pseudo-classes counted (one is ::after and another is :hover).