Sélecteurs css

Qu'est ce qu'un sélecteurs css, comment

Un sélecteur css peut-être beaucoup de choses. Il permet de sélectionner une ou plusieurs balises html pour lesquelles le style sera appliqué.

Une combinaison de sélecteur

On peut lier des sélecteurs en utilisant la ,. Par exemple :

p, h1 {
  color: red;
}

S'applique aux balises <p></p> et <h1></h1>.

Le sélecteur * correspond à tout. Il n'est pas recommandé de l'utiliser tout seul, mais en utilisant une spécialisation par exemple.

Sélection par attribut

On peut sélection une balise selon les attributs qu'elle possède. Par exemple toutes les balises ayant un attribut style :

*[style] {
  color: red;
}

Une spécialisation

• A B : les balises correspondant au sélecteurs B descendantes de balises A.
• A > B : les balises correspondant au sélecteurs B enfants directs de balises A.
• A ~ B : les balises correspondant au sélecteurs B voisins de balises A (ayant même parent).
• A + B : les balises correspondant au sélecteurs B voisins direct de balises A (ayant même parent).

Une pseudo classe

Le pseudo-classes permettent de sélection une balise dans un état particulier.

Utiles pour des liens :

• a:visited : est le sélecteur des liens visités.
• a:hover : lorsque la souris passe dessus
• a:active : lorsque l’on clique dessus

Pour que les liens non encore visités et les liens visités aient le même rendu, on pourra écrire :

a, a:visited {
  color: red;
}

Mais c'est utile pour plein de choses. Changer de couleur lorsque l'on passe sur une balise :

p:hover {
  color: red;
}

Un pseudo élément

Permet de sélectionner une partie d'une balise. A ne pas confondre avec une pseudo-classe qui sélectionne la balise en entier.

Par exemple :

p::first-letter {
  font-size: 2em;
}

Ou encore, le pseudo-élément suivant qui dépend de la taille de l'écran :

p::first-line {
  color: red;
}

Enfin, on utilise souvent les pseudo-éléments ::before et ::after pour ajouter des éléments avant et après une balise :

p::before {
  content: ">>>>>";
  font-size: 2em
}
p::after {
  content: "<<<<";
  font-size: .5em
}

class et id

On en reparlera dans la partie sur les balises anonymes, nous ne ferons que les mentionner ici pour la référence. Il existe deux sélecteurs css très utilisés :

• le sélecteur de classes
• le sélecteur d'identifiant