Selectors in CSS are used to select element(s) to then apply a set of style rules to them. Knowing about these selectors can make your job easy when styling specific things on your page.

We can divide these selectors into the following categories:

Basic selectors
Attribute selectors
Combinator selectors
Pseudo-classes selectors
Pseudo-elements selectors

Let's have a look at them one by one with examples.

Basic selectors

Basic selectors select elements by their name, id, or class or they can select all the elements on a web page(this comes in handy when you want to apply common styles to all elements).

Universal selector

Universal selector(*) selects all the elements of the document. It's used to apply common CSS rules to all elements.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Element name selector

This selector is used to select HTML elements and apply a set of CSS rules you would want on all instances of that particular element.

ul {
  list-style-type: none;
}

Class selector

Class selector is used to select and style elements with a given class name.

.danger {
  background-color: red;
  color: white;
}

ID selector

ID selector is used to select and style elements having a particular ID.

#header {
  background-color: teal;
  color: white;
  padding: 30px 50px;
}

Attribute selectors

Attribute selectors select elements that have specific attribute values and style them based on their attributes.

input[type="radio"] {
  width: 20px;
  height: 20px;
}

Combinator selectors

Combinator selectors use different characters to select specific elements with respect to the specified element.

We can use these combinators to target specific elements:

Descendant combinator
Child combinator
General sibling combinator
Adjacent sibling combinator

Descendant combinator (" ")

Descendant combinator selector selects all the elements which are descendants(child, grandchild, etc..) of the specified element.

div p {
  font-size: 25px;
}

Child combinator (">")

Child combinator selector selects all the elements which are the child of the specified element.

div > p {
  font-size: 25px;
}

General sibling combinator ("~")

General sibling combinator selector selects all the sibling elements of the specified element.

div ~ p {
  font-size: 25px;
}

Adjacent sibling combinator ("+")

Adjacent sibling combinator selector selects the sibling element immediately following that of the specified element.

div + p {
  font-size: 25px;
}

Pseudo-classes selectors

Pseudo-classes selectors select different states of elements and allow us to style them e.g. hovered, clicked, visited, etc...

a:visited {
  background-color: green;
}

Pseudo-elements selectors

Pseudo-elements selectors select different pseudo-elements (::before,::after, ::first-line, etc...) and apply styles to them.

p::first-line {
  background-color: gray;
  color: crimson;
}

One-stop guide to CSS selectors

Table of contents