Les sélecteurs CSS

Jusqu'à présent, nous avons vu un certain nombre de sélecteurs CSS :

  • les sélecteurs de type :nomElement { }
  • les sélecteurs de classe : .nomClasse{ }
  • les sélecteurs d'identifiant : #valeurId { }

Les attentifs auront peut être remarqué dans un de mes codes la possibilité de mutualiser les déclarations CSS pour plusieurs sélecteurs en les séparant par des virgules :

1
2
3
4
5
/* Les titres de tout niveau en police Arial */
h1,h2,h3,h4,h5,h6{
    font-family:"Arial", sans-serif;
}
/*

Ces sélecteurs sont suffisants pour la plupart de nos besoins. L'utilisation des classes et des id, permet d'ailleurs de solutionner de nombreux problèmes. Il existe cependant d'autres types de sélecteurs CSS. C'est que nous allons voir dans ce chapitre.

Les sélecteurs simples

Les sélecteurs de type

Ce sélecteur simple permet de cibler les éléments qui correspondent au nom indiqué.
Syntaxe :nomElement
Exemple :ppermettra de cibler n'importe quel élément <p>

Les sélecteurs de classe

Ce sélecteur simple permet de cibler les éléments en fonction de la valeur de leur attributclass.
Syntaxe :.nomClasse
Exemple :.btnpermettra de cibler n'importe quel élément qui possède la classebtn(définie avec un attributclass="btn").

Les sélecteurs d'identifiant

Ce sélecteur simple permet de cibler un élément d'un document en fonction de la valeur de son attributid. Dans un document, il ne doit y avoir qu'un seul élément pour un identifiant donné.
Syntaxe :#valeurId
Exemple :#tocpermettra de cibler l'élément qui possède l'identifianttoc(défini avec un attributid="toc").

Le sélecteur universel

Ce sélecteur permet de cibler tous les éléments d'un document. Syntaxe :* Exemple :*permettra de cibler tous les éléments du document.

Les sélecteurs d'attribut

Ce sélecteur simple permet de cibler des éléments d'un document en fonction de la valeur d'un de leurs attributs.
Syntaxe :[attr] ou [attr=valeur] Exemple :[autoplay]permettra de cibler tous les éléments qui possède l'attributautoplaydéfini (quelle que soit sa valeur). [target="\_blank"] permettra de cibler tous les éléments qui possède l'attributtarget avec la valeur "\_blank"

Les combinateurs

Les sélecteurs de voisin direct

Le combinateur'+'permet de sélectionner les nœuds qui suivent immédiatement un élément donné.
Syntaxe :A+B
Exemple : h1 + p permettra de cibler n'importe quel élément <p>qui suit immédiatement un élément <h1>.

Les sélecteurs de voisins

Le combinateur'~'permet de sélectionner les nœuds qui suivent un élément et qui ont le même parent.
Syntaxe :A~B
Exemple :p ~ apermettra de cibler les éléments <a> qui suivent (immédiatement ou non) un élément <p>

Les sélecteurs d'éléments fils

Le combinateur'>'permet de sélectionner les nœuds qui sont des fils directs d'un élément donné.
Syntaxe :A>B
Exemple :ul > lipermettra de cibler tous les éléments <li> qui sont directement situés sous un élément <ul>

Les sélecteurs d'éléments descendants

Le combinateur (espace) permet de sélectionner les éléments qui sont des descendants (pas nécessairement des fils directs) d'un élément donné.
Syntaxe :A B
Exemple :footer ppermettra de cibler n'importe quel élément <p>situé à l'intérieur d'un élément <footer>

Les pseudo-classes

Les pseudo-classes vont nous permettre de cibler des éléments HTML en fonction de leur état, ou plus exactement d’appliquer des règles CSS à des éléments HTML uniquement dans un certain contexte (lorsqu’ils sont dans un certain état).

Nous en avons déjà vu ; rappelez-vous lorsque l'on voulait modifier l'aspect d'un lien au survol de la souris et au clic.

Pour utiliser une pseudo classe en CSS, il faudra commencer avec un sélecteur "classique" (voir section précédente) qui sera suivi du caractère: puis du nom de la pseudo-classe ou de l’état à appliquer.

Par exemple, on va pouvoir changer la couleur de fond des élémentsad’une page en rouge lors du survol du curseur de la souris en écrivant en CSS :

1
2
3
a:hover {
    background-color: red;
}

Il existe beaucoup de speudo-classes en CSS. Je vais détailler ci-dessous les plus courantes mais je vous encourage à jeter un oeil à la liste complète.

Actions souris

La pseudo-classe :hover permet de spécifier l'apparence d'un élément au moment où l'utilisateur le survole avec le pointeur, sans nécessairement l'activer. La pseudo-class :active permet de spécifier l'apparence d'un élément au moment où l'utilisateur clique dessus.

Il existe d'autres pseudo-classes : :link, :visited, focus... Je laisse le loin à ceux qui souhaite aller plus loin de les découvrir par vous même.

En pratique, 

1
<a href="#" class="btn">Cliquez ici</a>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
a.btn { /* Affichage par défaut */
    color:#FFFFFF; /*Texte blanc*/
    background-color : blue; /*Fond bleu*/
    padding : 10px; /*Marge intérieure de 10px*/
}
a.btn:hover { /* Au survol  */
    background-color : red; /*Fond bleu*/
}
a.btn:active { /* Au clic */
    color:red; /*Texte rouge */
    background-color : #FFFFFF; /*Fond blanc*/
}

Relations parents-enfants

La pseudo-classe :first-child permet de cibler un élément qui est le premier élément fils par rapport à son élément parent.

Très pratique pour sélectionner par exemple le premier élément d'une liste :

1
2
3
4
5
/* Cible n'importe quel élément <li> /*
/* qui est le premier fils de son élément parent */
li:first-child {
    color: lime;
}

De même, la pseudo-classe :last-child permet de cibler un élément qui est le dernier élément fils par rapport à son élément parent.

Très pratique pour sélectionner le dernier élément d'une liste :

1
2
3
4
5
/* Cible n'importe quel élément <li> */
/* qui est le dernier fils de son élément parent */
li:last-child {
    color: teal;
}

Dans la même lignée, la pseudo-classe :nth-child(_n_) permet de cibler le nème élément fils (quel qu'il soit) de l'élément ciblé.

1
2
3
4
/* Cible le troisième élément enfant de n'importe quel élément <ol> */
ol:nth-child(3) {
    color: ghostwhite;
}

Pour aller plus loin, retrouver la liste complète des pseudo-classes CSS.

Les pseudo-éléments

Les pseudo-éléments représentent des entités du document qui ne sont pas explicitement décrites en HTML.

Pour le texte

::first-line permettra de cibler la première ligne de chacun des éléments ciblés.

1
2
3
4
/* Cible la première ligne d'un élément <p> */
p::first-line {
    font-weight: bold;
}

::first-letter permettra de cibler la première lettre de chacun des éléments ciblés. Très pratique pour faire des lettrines.

1
2
3
4
5
/* Sélectionne la première lettre d'un élément <p> */
p::first-letter {
    color: red;
    font-size: 130%;
}

Pour l'ajout de contenu

Nous terminerons par les pseudo-éléments ::before et ::afer qui permettent de créer des éléments à la volée. Il sont souvent utilisés pour ajouter du contenu cosmétique à un élément, en utilisant la propriété CSS content.

::before crée un pseudo-élément qui sera le premier enfant de l'élément ciblé. Généralement utilisé pour ajouter du contenu esthétique à un élément via la propriété CSS content.

1
2
3
4
/* On ajoute une étoile avant les titres de niveau 2*/
h2::before {
    content: "✭";
}

En CSS, ::after crée un pseudo-élément qui sera le dernier enfant de l'élément sélectionné. La propriété content permet d'ajouter du texte ou des symboles.

1
2
3
4
/* Ajoute une flèche après les liens */
a::after {
    content: "→";
}

Pour aller plus loin, retrouver la liste complète des pseudo-éléments CSS.