Introduction to CSS Selector

What is a selector?

A CSS selector is the first part of a CSS Rule. It tells which exact elements the specific rule should be applied to.

Type, class, and ID selectors

This group includes selectors that target an HTML element such as an <h1>.

h1 { color: red; }

It also includes selectors which target a class:

.box{ color: red; }

or, an ID:

#unique { color: red; }

Attribute selectors

This group of selectors gives you different ways to select elements based on the presence of a certain attribute on an element:

a[title] { }
a[href="<https://example.com>"] { }

Pseudo-classes and pseudo-elements

This group of selectors includes pseudo-classes, which style certain states of an element. The :hover pseudo-class for example selects an element only when it is being hovered over by the mouse pointer:

a:hover { }

Combinators

The final group of selectors combines other selectors in order to target elements within our documents. The following for example selects paragraphs that are direct children of <article> elements using the child combinator (>):

article > p { }