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

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

Select your answer

Question 3/15

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

Select your answer

Question 4/15

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

Select your answer

Question 5/15

Which rule type is generally not affected by inheritance?

Select your answer

Question 6/15

Which of these selectors has the potential to be overridden by default styles due to its low specificity?

Select your answer

Question 7/15

What happens if you apply 
!important
to a rule?

Select your answer

Question 8/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 9/15

Which statement is correct about inline styles and specificity?

Select your answer

Question 10/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 11/15

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

Select your answer

Question 12/15

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

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

In a scenario with 
.class1#id .class2 p
, what's the specificity score?

Select your answer

Question 15/15

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

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
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 3/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 4/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 5/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 6/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which of these selectors has the potential to be overridden by default styles due to its low specificity?

Available answers

The specificity of ul li (0,0,0,2) is lower than the specificity of selectors with an ID or multiple classes, potentially leading to it being overridden by more specific rules.
Question 7/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 8/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 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
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 11/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 12/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 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
In a scenario with <pre><code>.class1#id .class2 p</code></pre>, what's the specificity score?

Available answers

The specificity score is (1,1,0,1) due to 1 ID, 1 class, and 1 element.
Question 15/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.