HTML & CSS - Mastery / CSS Selectors

Pseudo-class selectors (select elements based on a certain state)

✅ Common Pseudo-class Selectors

Selector

Description

:hover

Selects when the user hovers over an element

:active

Selects when an element is being clicked

:focus

Selects when an element (like input) is focused

:first-child

Selects the first child of its parent

:last-child

Selects the last child of its parent

:nth-child(n)

Selects the nth child of its parent

:checked

Selects checked form elements (like radio/checkbox)

:disabled

Selects disabled form elements

:not(selector)

Selects everything except what's passed in

✅ Example: Hover, Active, and First Child

Here’s a complete working example using separate HTML and CSS:

🖥️ Output Highlights

  • Hovering the link turns it red and underlined.

  • Clicking it turns it green (active).

  • Focusing on the input highlights it with a blue border.

  • The first <li> becomes orange and bold.

  • The checked checkbox has a green accent color.

🚀 Try and Play Around