Mission 3: Command Override
A generic rule is making all text blue, but the '.error-message' class needs to be red for visibility. The class rule isn't working because of specificity.
00:00
Mission Objective
The provided `#main-content p` selector is more specific than the `.error-message` selector. To fix this, create a more specific selector `p.error-message` to override the blue color and set its `color` to `red`.
Step 1 / 1
System Briefing: The Rule Hierarchy
What happens when multiple CSS rules target the same element? The browser uses a system called Specificity to decide which rule wins. It's a calculated weight that determines the "strength" of a selector.
The Specificity Hierarchy (Highest to Lowest)
- Inline Styles: A style applied directly with the
styleattribute. This is the nuclear option. - ID Selectors: Targeting an element by its unique ID (e.g.,
#main-nav). - Class, Pseudo-class, Attribute Selectors: Targeting by class (
.btn), pseudo-class (:hover), or attribute ([type="text"]). - Type Selectors & Pseudo-elements: Targeting element types (
p,div) or pseudo-elements (::before).