CSS Full Course Day 15 [Hindi] 💻 | Pseudo-classes, Pseudo-elements & Variables! 🚀 | Mohit Decodes

🎨 CSS Tutorial – Day 15: Pseudo-classes, Pseudo-elements & Variables!

Welcome to Day 15 of the CSS Full Course [Hindi] by Mohit Decodes! Today, we’ll explore powerful CSS features that help you style elements dynamically and efficiently — Pseudo-classes, Pseudo-elements, and CSS Variables.

🔹 Pseudo-classes

  1. Target elements in a specific state without adding extra classes
  2. Examples:
  3. :hover — when mouse is over an element
  4. :focus — when element is focused
  5. :nth-child(n) — target specific child elements
css
CopyEdit
a:hover {
color: #f44336;
}
li:nth-child(odd) {
background-color: #e0e0e0;
}

🔹 Pseudo-elements

  1. Style parts of an element like before or after content
  2. Common pseudo-elements:
  3. ::before
  4. ::after
css
CopyEdit
p::before {
content: "Note: ";
font-weight: bold;
color: #2196F3;
}

🔹 CSS Variables (Custom Properties)

  1. Define reusable values and keep code DRY (Don’t Repeat Yourself)
  2. Syntax:
css
CopyEdit
:root {
--main-color: #4caf50;
--padding: 10px;
}

.button {
background-color: var(--main-color);
padding: var(--padding);
}

💡 Tips:

  1. Use pseudo-classes to add interactive styles easily
  2. Use pseudo-elements to add decorative content without extra HTML
  3. Use CSS variables for theme management and easy maintenance