What are CSS Selectors?

CSS Selectors are patterns that are used to find HTML elements. CSS Selectors are used to style elements on a page that match the given criteria.

Basic CSS Selectors identify elements based on their class, id, type or attributes. Advanced Selectors identify elements based on relationships between two elements or elements based on certain states.

Read more about the basics of CSS Selectors on W3Schools or MDN Web Docs‚Äč

Examples of some basic CSS Selectors are shown below.

CSS Selector

Example

Description

*

*

Selects all elements

.class

.header

Selects all elements with class = "header"

#id

#subheading

Selects the element with id = "subheading"

element

input

Selects all <input> elements

[attribute=value]

[target=_blank]

Selects all elements with target = "_blank"

Play around with W3School's CSS Selector Test to learn CSS Selectors hands-on