Make #one red even though a class rule sets it blue.
Acceptance criteria
- 1.Make #one red even though a class rule sets it blue.
CSS Tutorial · CSS Foundations
These 10 tasks go with the CSS Specificity chapter. 5 of them ask you to build something small from scratch; 5 give you code that is already broken and ask you to work out why. Set aside about 90 minutes for the whole set, though you can do them in any order.
Nothing here is marked by a person. When you press Submit, the editor checks your code against the points listed under each task and tells you straight away what passed and what didn't (you need a free account to submit). If you get stuck, there are hints, and a worked solution once you've had a go. The first 2 tasks are free; the rest are part of the practice plan.
If it's been a while since you read the chapter, here is how it starts: “Read selector weight correctly, avoid specificity battles, and know when source order breaks a tie. The lesson explains selector weight, special selector functions, tie-breaking by source order, and why !important is rarely the right first fix.” .
1.Let the id winexercise · easy · 10 min
Make #one red even though a class rule sets it blue.
Passes when: Make #one red even though a class rule sets it blue.
2.Beat an element rule with a classexercise · easy · 10 min · practice plan
A class outranks a bare element selector.
Passes when: A class outranks a bare element selector.
3.Raise specificity without an idexercise · easy · 10 min · practice plan
Use a compound selector so the paragraph turns green.
Passes when: Use a compound selector so the paragraph turns green.
4.Win with two classesexercise · easy · 10 min · practice plan
Two class selectors outrank one.
Passes when: Two class selectors outrank one.
5.Prefer specificity over !importantexercise · medium · 10 min · practice plan
Make #one green using a more specific selector, not !important.
Passes when: Make #one green using a more specific selector, not !important.
6.Fix the class that cannot beat an idbug fix · easy · 8 min
An id outranks any number of classes.
Passes when: An id outranks any number of classes.
7.Fix the element rule expected to winbug fix · easy · 8 min · practice plan
The class rule is more specific than the element rule.
Passes when: The class rule is more specific than the element rule.
8.Fix the !important crutchbug fix · easy · 8 min · practice plan
Replace !important with a properly specific selector.
Passes when: Replace !important with a properly specific selector.
9.Fix the selector that never matchesbug fix · easy · 8 min · practice plan
The compound selector targets a class the element does not have.
Passes when: The compound selector targets a class the element does not have.
10.Fix the over-specific overridebug fix · easy · 8 min · practice plan
A tie should be broken by order, not by adding an id.
Passes when: A tie should be broken by order, not by adding an id.
Between them these tasks cover Specificity weights, id vs class and Avoiding !important.
Looking for a different chapter? See every practice set, or switch to the interview theory questions.