Real-life examples of CSS Selectors in popular websites for beginners

📚 Quick Study Guide

• 🎯 CSS Selectors: Target HTML elements to apply styles.
• 🆔 ID Selector: Uses the `#` symbol (e.g., `#navbar`). Should be unique per page.
• Class Selector: Uses the `.` symbol (e.g., `.button`). Can be used multiple times.
• 🏷️ Element Selector: Targets HTML elements directly (e.g., `p`, `h1`, `img`).
• 🔗 Attribute Selector: Targets elements based on their attributes (e.g., `[type="text"]`).
• 👶 Descendant Selector: Selects elements that are descendants of another element (e.g., `div p`).
• ➕ Child Selector: Selects elements that are direct children of another element (e.g., `ul > li`).
• :hover: Add special effects when you mouse-over an element (e.g., a button turns blue when you move the mouse over it.)

Practice Quiz

1. Which CSS selector targets an element with the ID 'main-title'?
   1. A. `.main-title`
   2. B. `main-title`
   3. C. `#main-title`
   4. D. `element.main-title`
2. Which CSS selector targets all paragraph elements?
   1. A. `.paragraph`
   2. B. `#paragraph`
   3. C. `p`
   4. D. `[paragraph]`
3. Which CSS selector targets all elements with the class 'highlight'?
   1. A. `#highlight`
   2. B. `highlight`
   3. C. `.highlight`
   4. D. `*highlight`
4. Which CSS selector targets all `li` elements that are direct children of a `ul` element?
   1. A. `ul li`
   2. B. `ul + li`
   3. C. `ul > li`
   4. D. `ul ~ li`
5. Which CSS selector targets all input elements with the attribute `type="email"`?
   1. A. `input.email`
   2. B. `input#email`
   3. C. `input > email`
   4. D. `input[type="email"]`
6. Which CSS pseudo-class is used to style an element when a user hovers the mouse over it?
   1. A. `:active`
   2. B. `:focus`
   3. C. `:hover`
   4. D. `:visited`
7. What does the following CSS selector target: `div p`?
   1. A. Only paragraphs that are direct children of a div.
   2. B. Only the first paragraph inside a div.
   3. C. All paragraphs inside a div, regardless of nesting.
   4. D. All divs inside a paragraph.