Multiple Choice Questions on CSS Specificity and Style Application

📚 Quick Study Guide

💡 Specificity determines which CSS rule is applied if multiple rules target the same element. 🔢 Specificity is calculated based on different selector types:
• Inline styles: 1000
• ID selectors: 0100
• Class selectors, attribute selectors, pseudo-classes: 0010
• Type selectors (elements) and pseudo-elements: 0001
• Universal selector (*) and combinators (+, >, ~): 0000 (no specificity)
🧪 The cascade is the algorithm that defines how user agents combine style sheets originating from different sources. 🎨 Stylesheets are applied in the following order (lowest to highest priority):
• User-agent stylesheet (browser defaults)
• User stylesheet (user-defined styles)
• Author stylesheet (developer-defined styles)
➕ When specificity is the same, the last rule declared in the CSS takes precedence. 🌐 The !important declaration overrides all normal specificity rules (use sparingly!).

🤔 Practice Quiz

1. Which of the following selectors has the highest specificity?
   1. p { ... }
   2. .my-class { ... }
   3. #my-id { ... }
   4. * { ... }
2. What is the specificity of the following selector: body #content .data img?
   1. 0, 1, 1, 2
   2. 1, 0, 1, 1
   3. 0, 1, 1, 1
   4. 1, 1, 1, 1
3. If two rules have the same specificity, which rule is applied?
   1. The first rule defined in the CSS.
   2. The rule that is declared with !important.
   3. The last rule defined in the CSS.
   4. A random rule.
4. Which of the following declarations overrides all other specificity calculations?
   1. !override
   2. !important
   3. !specific
   4. !default
5. What is the specificity of an inline style?
   1. 0100
   2. 0010
   3. 1000
   4. 0001
6. What is the specificity of the following selector: style="color:red;"?
   1. 0001
   2. 1000
   3. 0100
   4. 0010
7. What is the specificity of the following selector: #nav li:hover a?
   1. 0,1,2,1
   2. 1,0,2,1
   3. 1,0,1,1
   4. 0,1,1,1