CSS Specificity quiz

Loading quiz...

TL;DR answer sheet

CSS Specificity — quiz answer sheet, click to expand.

1. What is CSS specificity?

Answer: A way to determine which CSS rule applies when multiple rules match the same element

Explanation: CSS specificity is a set of rules that determines which CSS rule will be applied to an element when multiple rules match it. It is calculated based on the types of selectors used in the rules, such as IDs, classes, and element selectors.

2. a specificity score of 0-1-0 means?

Answer: 1 class selector

Explanation: The specificity score is calculated following this format (ID, class/pseudo-class/attribute, element/pseudo-elements). A score of 0-1-0 indicates that there is one class selector and no ids or element selectors.

3. What has the highest specificity?

Answer: .box.box

Explanation: Repeating the same class name increases the specificity of the class selector.

4. What is the specificity of :not(.foo#bar)?

Answer: 1-1-0

Explanation: only what's inside :not() counts.

5. What has a specificity more than 0?

Answer: :is(.cls)

Explanation: The universal selector `*` and `:where()` have 0 specificity.

6. (0,5,1) has highest specificity than (1,0,0)?

Answer: false

Explanation: ID selectors outrank any number of class or element selectors.

7. The specificity of #myId is the same as [id="myId"]?

Answer: false

Explanation: The specificity of #myId is 1-0-0 while [id="myId"] has 0-1-0.

8. What is the Specificity of :is(div, .cls, #id)?

Answer: 1-0-0

Explanation: :is() takes the specificity of its most specific inner selector, which is #id (1,0,0).

9. What is the specificity of div.box:hover::before?

Answer: 0-2-2

Explanation: .box and :hover are 2 class-like. div and ::before are 2 element-like.

10. Inline styles have higher specificity than selectors with ID.

Answer: true

Explanation: Inline styles (style="...") are not part of specificity scoring itself, but they are evaluated earlier in the cascade and override any styles from selectors unless overridden by !important.

11. What is the specificity of :where(div#id.cls)?

Answer: 0-0-0

Explanation: :where() always has zero specificity regardless of what's inside.

12. Which wins in conflict resolution?

Answer: p.btn { color: blue !important; }

Explanation: !important beats specificity unless both have it. Then specificity matters.

13. Repeating the same class or id selector increases specificity.

Answer: true

Explanation: .btn => 0-1-0, .btn.btn => 0-2-0. Each class adds to the count, same with ids.

14. if you have `@layer base, theme, components;` and conflicting rules in each layer, which layer wins?

Answer: components (last declared)

Explanation: In @layer, later layers have higher priority regardless of specificity. The order of declaration determines precedence: base < theme < components.

15. With `@layer utilities { .text-red { color: red !important; } }` and unlayered `.text-red { color: blue !important; }`, what color wins?

Answer: red (from layer)

Explanation: When the !important flag is used in both layers and unlayerd declaration, the priority is reversed and earlier layers has more priority than unlayered rules.

Continue Reading