CSS Selectors

CSS selectors define which HTML elements styles apply to. With them, we can precisely select one element, multiple elements, or even complex structures.

Basic Selectors

Basic selectors refer directly to an HTML element, for example <p>, <div>, <h1>. With these, we can easily identify specific elements in the document.

In the following example, all <p> elements’ text becomes blue:

Common Selector Types

CSS offers several types of selectors. The table below shows the most common ones:

Selector	Description
p	Selects all <p> elements.
.class	Selects elements belonging to a specific class.
#id	Selects the element with a specific identifier.
*	Selects all HTML elements.

Complex Selectors

Complex selectors allow us to create more precise rules, for example by combining parent-child relationships or states.

Pseudo-classes

Pseudo-classes target special states and positions, for example when a mouse pointer hovers over an element or the first item in a list.

Attribute Selectors

With attribute selectors, we can target elements that have specific attributes or whose values match a pattern.

Combinators

Combinators define the relationship between elements, such as parent-child, siblings, or general hierarchy.

Tips for Using Selectors

Efficient use of selectors helps keep CSS clean and avoids unnecessary code. Here are some tips:

Do not use overly general selectors (*), as they can cause performance issues.
Use ID selectors sparingly, prefer classes for flexibility.
Pay attention to specificity: more precise selectors override more general rules.