Lesson: CSS Pseudo-Selectors

🎯 What are Pseudo-Selectors?

Pseudo-selectors let you apply styles to elements based on interactions (like :hover), position in the DOM (like :first-child), or states (like :checked).

🔧 Common Pseudo-Classes

• :hover – When the user hovers
• :focus – When input is focused
• :active – When clicked
• :checked – For checkboxes/radio
• :first-child, :last-child
• :nth-child(n), :not()

🧪 Example: Button Hover

button:hover {
  background-color: #4CAF50;
  color: white;
}

🧪 Example: Zebra Table

tr:nth-child(odd) {
  background: #f2f2f2;
}
tr:nth-child(even) {
  background: #ffffff;
}

🧪 Example: First Letter Styling

p::first-letter {
  font-size: 2em;
  color: red;
}

🧪 Example: Link Icon

a::before {
  content: "\2192 ";
  color: green;
}

📌 Tips

• Use :hover with transitions for smooth effects
• :nth-child helps for dynamic lists
• Combine with :not() to exclude items

🚀 Try It Yourself!