CSS Specificity and Inheritance Quiz

Create an account and save your quiz results

Login and save your results

OR

Question 1/15

If a style is defined within a media query, how does it affect specificity compared to the same style outside of it?

Select your answer

Question 2/15

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

Select your answer

Question 3/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 4/15

Which combination of selectors will represent a specificity value of (0,1,1,2)?

Select your answer

Question 5/15

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

Select your answer

Question 6/15

What specificity level does a selector with the structure 
#id1 .class1.class2 #id2
have?

Select your answer

Question 7/15

Which property is least likely to be influenced by inheritance in CSS?

Select your answer

Question 8/15

Which of the following selectors has the highest specificity?

Select your answer

Question 9/15

Which statement is correct about inline styles and specificity?

Select your answer

Question 10/15

What happens if you apply 
!important
to a rule?

Select your answer

Question 11/15

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

Select your answer

Question 12/15

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

Select your answer

Question 13/15

When using multiple 
:not()
pseudo-classes in a selector, is it possible to have different specificity scores?

Select your answer

Question 14/15

For 
input[type="text"]:focus, input[type="password"]:focus
, what is the combined specificity score?

Select your answer

Question 15/15

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

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
If a style is defined within a media query, how does it affect specificity compared to the same style outside of it?

Available answers

Media queries do not affect the specificity of a rule. The same specificity applies, but conditional regards to viewport size or conditions apply to its application.
Question 2/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 3/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 4/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which combination of selectors will represent a specificity value of (0,1,1,2)?

Available answers

.container h2 > p span:first-child equals (0,1,1,2) due to one class, two elements, and one pseudo-class.
Question 5/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 6/15
😊 Your answer was correct 🙁 Your answer was incorrect
What specificity level does a selector with the structure <pre><code>#id1 .class1.class2 #id2</code></pre> have?

Available answers

The specificity is calculated as (0,2,2,0) because there are two IDs and two classes in the selector.
Question 7/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which property is least likely to be influenced by inheritance in CSS?

Available answers

Properties related to the box model like margin do not inherit, while text-related properties like color, font-style, and line-height typically do inherit.
Question 8/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which of the following selectors has the highest specificity?

Available answers

The selector body div#main.container > p:first-child has the highest specificity with one ID selector, two class selectors, one pseudo-class, and one element selector, making its specificity score higher than the others.
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
What happens if you apply <pre><code>!important</code></pre> to a rule?

Available answers

The !important declaration overrides any other conflicting rule, except when another rule also has !important. Its use does not alter the specificity calculation.
Question 11/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 12/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 13/15
😊 Your answer was correct 🙁 Your answer was incorrect
When using multiple <pre><code>:not()</code></pre> pseudo-classes in a selector, is it possible to have different specificity scores?

Available answers

:not() adds to specificity based on its argument, so different arguments can lead to different specificity.
Question 14/15
😊 Your answer was correct 🙁 Your answer was incorrect
For <pre><code>input[type="text"]:focus, input[type="password"]:focus</code></pre>, what is the combined specificity score?

Available answers

Each selector has a specificity of (0,1,0,1) with 1 attribute selector and 1 pseudo-class. They stand isolated; the combination is not aggregated.
Question 15/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).