Sélecteurs de types

Sélectionnent des éléments en fonction de leur balise. Par exemple:

body {
  font-size: 18px;
}

h1 {
  font-weight: 500;
}

Sélecteurs de classes

Sélectionnent des éléments en fonction de leur classe. Par exemple:

.navigation {
  display: flex;
}

.page-title {
  color: #fefefe;
}

Sélecteur universel

Sélectionne tous les éléments de la page. Par exemple:

Sélecteurs de pseudo-classes

Sélectionnent des éléments en fonction de leur état (par ex. élément survolé) ou de leur position (par ex. 3ème élément):

:hover { 
  opacity: 0.6; 
}

:nth-child(3) {
  margin-right: 20px;
}

<aside> ➡️ Combiner les sélecteurs

</aside>