CSS Selector Reference

Selectors are used to "find" (or select) the HTML elements you want to style. This reference covers everything from basic element selectors to advanced pseudo-classes.

1. Simple Selectors

Target elements based on name, id, or class.

Selector	Example	Selects...
`.class`	`.intro`	All elements with `class="intro"`.
`#id`	`#main`	The element with `id="main"`.
`*`	`*`	All elements on the page.
`element`	`p`	All `<p>` elements.

2. Combinator Selectors

Target elements based on a specific relationship between them.

Selector	Example	Selects...
`div p`	`div p`	All `<p>` elements inside `<div>` elements.
`div > p`	`div > p`	All `<p>` elements that are direct children of a `<div>`.
`div + p`	`div + p`	The `<p>` element that is placed immediately after a `<div>`.

3. Pseudo-Classes & Pseudo-Elements

Target based on state or specific parts of an element.

Selector	Example	Selects...
`:hover`	`a:hover`	Link when the user hovers over it.
`:nth-child(n)`	`li:nth-child(2)`	The second child element of its parent.
`::before`	`p::before`	Inserts content before each `<p>` element.
`::after`	`p::after`	Inserts content after each `<p>` element.

Tip: Precise selectors reduce the need for excessive classes and keep your HTML clean. Always try to find the most efficient selector first!

« Previous Lesson Next Lesson »