📚 Quick Study Guide

• 🎯 Element Selector: Selects HTML elements based on the element name. Example: `p { color: blue; }` selects all `

  ` elements.

• 🆔 ID Selector: Selects the HTML element with a specific `id`. ID's are unique within a page. Example: `#myHeader { background-color: lightblue; }`
• className Class Selector: Selects all HTML elements with a specific `class`. Example: `.intro { font-size: 20px; }`
• ✨ Universal Selector: Selects all HTML elements on the page. Example: `* { margin: 0; padding: 0; }`
• 📦 Attribute Selector: Selects HTML elements based on their attributes and attribute values. Example: `input[type="text"] { width: 200px; }`
• 🔗 Pseudo-class Selector: Selects elements based on a certain state, like `:hover`, `:active`, `:focus`, etc. Example: `a:hover { color: red; }`
• 🌳 Descendant Selector: Selects elements that are descendants of another element. Example: `div p { font-style: italic; }` selects all `

  ` elements inside `

  ` elements.
• ➕ Child Selector: Selects elements that are direct children of another element. Example: `ul > li { list-style-type: none; }` selects only `
• ` elements that are direct children of `
  ` elements.
  • ➕ Adjacent Sibling Selector: Selects an element that is directly after another specific element. Example: `h1 + p { margin-top: 10px; }` selects the first `

    ` element that is immediately preceded by an `

    ` element.

  • ➕ General Sibling Selector: Selects all elements that are siblings of a specified element. Example: `h1 ~ p { color: green; }` selects all `

    ` elements that are siblings of an `

    ` element.

  🧪 Practice Quiz

  1. Which CSS selector is used to select all `

     ` elements on a page?

     1. `#p`
     2. `.p`
     3. `p`
     4. `*`
  2. Which CSS selector is used to select an element with the ID "main"?
     1. `.main`
     2. `main`
     3. `#main`
     4. `element.main`
  3. Which CSS selector is used to select all elements with the class name "highlight"?
     1. `highlight`
     2. `#highlight`
     3. `.highlight`
     4. `*highlight`
  4. Which selector matches all elements?
     1. `all`
     2. `*`
     3. `.all`
     4. `#all`
  5. Which CSS selector is used to select an `input` element with the attribute `type="text"`?
     1. `input.text`
     2. `input#text`
     3. `input[type="text"]`
     4. `input="text"`
  6. Which pseudo-class selector is used to style a link when the mouse hovers over it?
     1. `a:visited`
     2. `a:link`
     3. `a:hover`
     4. `a:active`
  7. Which CSS selector selects all `

     ` elements inside a `

     ` element?

     1. `div > p`
     2. `div + p`
     3. `div p`
     4. `div.p`
  Click to see Answers

  1. C
  2. C
  3. C
  4. B
  5. C
  6. C
  7. C