Lesson Content

Pseudo-Classes:
Apply styles based on a particular state or condition of an element. Examples:
- :hover: When the mouse pointer is over the element.
- :focus: When the element (often a form input) has keyboard or mouse focus.
- :nth-child(): Targets an element based on its position in a parent (e.g., the 2nd or 3rd child).
Pseudo-Elements:
Create and style parts of an element or inject content without needing additional DOM markup. Examples:
- ::before, ::after: Insert generated content before or after an element’s actual content.
- ::first-line, ::first-letter: Style the first line or letter of a block of text.

Hover, Focus, Active States
- element:hover: Changes style on mouse-over.
- element:focus: Changes style when the element (like an input) is focused.
- element:active: Changes style when an element is clicked or “active.”
Structural Pseudo-Classes
- :nth-child(n): Selects the nth child. For instance, :nth-child(2) targets the 2nd child.
- :nth-child(even) or :nth-child(odd): Targets alternating children.
- :first-child, :last-child: Targets the first or last child within a parent.
Pseudo-Elements:
- ::before and ::after: Commonly used to add decorative icons, quotes, or styling wrappers.
- content: ""; typically needed in the CSS to generate the content.
- Example:

css
Copy code
.btn::before {
  content: "✔ ";
  color: green;
}

Combining Pseudo-Classes and Pseudo-Elements
- E.g., .menu li:hover::after to add a decorative border or arrow on hover.
Browser Prefixes
- Modern browsers mostly support the standard double-colon syntax (e.g., ::before, ::after),
- but older specs used a single colon. Most browsers still accept :before and :after.

Day 14: CSS Pseudo-Classes and Pseudo-Elements