{"id":"code-hs-css-specificity-winner","audience":"high-school","category":"coding","track":"coding","technique":"format","title":"Find out why your text is red, not green","free":false,"task":"On your class website, 'Welcome!' shows up red even though you gave it class=\"note\" for green. Ask for exactly 3 numbered lines: '1. Winner: <selector> (<color>)', '2. Why: ...' under 20 words, and '3. Rank: <strongest> > <middle> > <weakest>' listing all three selectors. Don't rewrite your CSS. No code blocks, under 60 words.","materialLabel":"Your CSS and HTML (attached to your prompt automatically)","material":"/* style.css - \"About Me\" page, Web Design 1 (Mr. Haley) */\n\nbody {\n  font-family: Verdana, sans-serif;\n  background: #fdfaf3;\n}\n\np {\n  color: blue;\n}\n\n.note {\n  color: green;\n}\n\n#intro p {\n  color: red;\n}\n\nfooter p {\n  font-size: 12px;\n}\n\n<!-- index.html -->\n<div id=\"intro\">\n  <h1>Hi, I'm Sam</h1>\n  <p class=\"note\">Welcome!</p>\n</div>\n<p>I like skateboarding and drawing.</p>\n<footer><p>Made by Sam</p></footer>\n\n<!-- I thought the .note rule should win because it's more specific\n     than p, and it comes after p in the file. But Welcome! is red.\n     The second paragraph is blue like I expected. -->","rules":[{"type":"numberedItems","count":3},{"type":"codeBlocks","count":0},{"type":"maxProseWords","max":60}],"mistakes":[{"title":"Getting new CSS","why":"The AI's default is to rewrite your rules or add !important, which hides the lesson.","fix":"Say: \"Don't rewrite my CSS; just explain which rule wins.\"","checks":["r2","codeBlocks"]},{"title":"No clear winner","why":"The AI explains specificity in general before getting to your rule.","fix":"Ask: \"Line 1: Winner: <selector> (<color>).\"","checks":["r0"]},{"title":"No ranking","why":"Seeing all three rules in order makes the rule stick.","fix":"Add: \"Line 3: Rank: strongest > middle > weakest.\"","checks":["r2"]},{"title":"A long lesson","why":"The AI writes paragraphs on specificity scores.","fix":"Add: \"Exactly 3 numbered lines; Why under 20 words.\"","checks":["numberedItems","maxProseWords","r1"]}],"promptHints":[{"label":"Gives the labels","patterns":["winner","why:","rank"]},{"label":"Sets the number of lines","patterns":["\\b(3|three)\\b.{0,15}line","numbered"]},{"label":"Rules out rewrites","patterns":["don'?t rewrite","no (new )?css","no code"]},{"label":"Asks for a ranking","patterns":["rank","strongest","order"]},{"label":"Caps the reason","patterns":["\\d+\\s*words"]}],"hint":"You want to understand the rule, not get a patch. Ask for the winner, the reason and a ranking in fixed labels.","rubricLabels":["Line 1 starts with 'Winner:' and names #intro p with the color red","Line 2 starts with 'Why:' and says the id in #intro p makes it more specific than the class selector .note (order in the file doesn't beat that)","Line 3 starts with 'Rank:' and lists #intro p > .note > p in that order, and no rewritten CSS is given"]}