The #main p rule makes every paragraph impossible to override.
What to build
A stylesheet with low specificity.
Requirements
- Replace
#main pwith a rule using no id, keeping paragraphsdimgray. - Paragraphs with the class
alertarecrimson. - The
alertrule must be written as a selector containing only.alert.
Constraints
No !important, and no ids in your selectors.
Example
.content p scores 0,1,1 and would still beat .alert, which scores 0,1,0. A plain p scores 0,0,1 and loses to the class, which is what you want here.
Why it works
With the id gone, the single class beats the plain type selector, which is what you would expect when you read the stylesheet.
Hints
Hint 1
Count ids, classes and types for each selector.
Hint 2
Replace the id selector with a class, so that later rules can compete.
Solution
Show one correct solution (try it yourself first)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Duel</title>
<style>
p { color: dimgray; }
.alert { color: crimson; }
</style>
</head>
<body>
<div id="main">
<p>Normal text.</p>
<p class="alert">Important news.</p>
</div>
</body>
</html>