Sélecteurs CSS simples et combinateurs

Le CSS va nous permettre de mettre en forme nos contenus HTML en appliquant des styles aux différents éléments. Cependant, pour appliquer un style particulier à un ou plusieurs éléments HTML en CSS, il va avant tout falloir les cibler, c’est-à-dire indiquer avec précision à quels éléments doivent s’appliquer les styles créés en CSS.

Le but de cette leçon est d’apprendre à se servir de quelques sélecteurs CSS « simples » et de comprendre leur limitation. Nous allons également en profiter pour définir plus précisément les différents types de sélecteurs CSS et directement voir comment combiner différents sélecteurs simples pour en créer des plus complexes.

 

Les sélecteurs CSS éléments ou sélecteurs « simples »

Il existe de nombreux types de sélecteurs CSS et autant de moyens de cibler des contenus HTML en CSS.

La manière la plus simple de cibler un type d’éléments HTML en CSS est néanmoins d’utiliser des sélecteurs éléments ou sélecteurs « simples ». Ces sélecteurs sont appelés « sélecteurs éléments » tout simplement car ils reprennent le nom des éléments HTML qu’ils sélectionnent.

Par exemple, le sélecteur CSS p va cibler tous les éléments p (c’est-à-dire tous les paragraphes) d’une page HTML.

De même, le sélecteur CSS h1 va nous permettre d’appliquer des styles à notre titre h1 ; le sélecteur a va nous permettre de mettre en forme nos liens, etc.

See the Pen Cours HTML CSS 3.4.1 by Pierre (@pierregiraud) on CodePen.

 

Comprendre les limitations des sélecteurs CSS simples

L’utilisation de sélecteurs simples doit être favorisée tant que possible car ces sélecteurs consomment moins de ressources que des sélecteurs plus complexes et car ils sont plus clairs.

Ceci étant dit, nous n’allons bien souvent pas pouvoir nous contenter de n’utiliser que des sélecteurs simples car ceux-ci vont considérablement limiter nos options de ciblage et car ils ne vont pas nous permettre d’exploiter toute la puissance du CSS.

En effet, en utilisant uniquement les sélecteurs éléments, nous allons être obligés d’appliquer les mêmes styles à tous les éléments d’un même type ce qui n’est pas très flexible.

Comment appliquer des styles à un élément en particulier ou à plusieurs éléments différents choisis ? Pour faire cela, nous allons devoir utiliser des sélecteurs complexes.

 

Introduction aux sélecteurs CSS complexes et combinateurs

Toute la puissance du CSS réside dans les options que nous offre ce langage pour cibler précisément un contenu HTML dans une page.

En effet, en plus des sélecteurs simples, le CSS met à notre disposition une panoplie de sélecteurs que l’on va pouvoir utiliser pour cibler des contenus de manière très précise :

• On va pouvoir utiliser des sélecteurs CSS combinateurs qui vont être en fait la combinaison de plusieurs sélecteurs simples à l’aide de caractères spéciaux à la signification précise ;
• On va pouvoir cibler des contenus HTML selon le fait qu’ils possèdent un certain attribut ou même selon la valeur d’un attribut ;
• On va pouvoir utiliser les pseudo classes qui vont nous permettre d’appliquer des styles à des éléments en fonction de leur état, c’est-à-dire en fonction des actions d’un utilisateur (contenu cliqué, coché, visité, etc.), de la place de l’élément dans le document, etc. ;
• On va pouvoir utiliser les pseudo éléments qui vont nous permettre de n’appliquer des styles qu’à certaines parties des éléments.

Nous allons apprendre à faire tout cela au cours de ce cours. Pour le moment, toutefois, nous allons nous contenter de présenter et d’apprendre à manipuler les différents caractères « combinateurs » qui vont nous permettre de combiner des sélecteurs CSS simples afin d’en créer des plus complexes.

Sélectionner tous les éléments avec le sélecteur CSS universel ou sélecteur étoile (*)

Le sélecteur CSS étoile * ne nous permet pas à proprement parler de combiner différents sélecteurs simples entre eux mais permet de sélectionner tous les éléments HTML d’une page d’un coup ; c’est pourquoi il est également appelé sélecteur CSS universel.

Ce sélecteur va donc nous permettre d’appliquer les mêmes styles à tous les éléments d’une page. Cela peut être très utile pour par exemple définir une police par défaut ou effectuer un reset des marges de tous les éléments pour ensuite les positionner plus précisément.

See the Pen Cours HTML CSS 3.4.2 by Pierre (@pierregiraud) on CodePen.

Appliquer des styles à plusieurs éléments avec le caractère virgule (,)

Pour appliquer un même style à deux types éléments différents sans avoir à recopier le style deux fois en CSS, nous allons simplement pouvoir séparer nos deux sélecteurs par une virgule. Les styles CSS déclarés juste après s’appliqueront ainsi aux deux éléments ou groupes d’éléments sélectionnés.

Bien évidemment, rien ne nous empêche d’appliquer un même style à 3, 4, … éléments ou groupes d’éléments. Le tout est de séparer les différents sélecteurs par des virgules.

See the Pen Cours HTML CSS 3.4.3 by Pierre (@pierregiraud) on CodePen.

Utiliser plusieurs sélecteurs CSS à la suite

En mentionnant plusieurs sélecteurs à la suite en CSS, nous allons pouvoir appliquer des styles à certains éléments contenus dans d’autres éléments.

Par exemple, utiliser le sélecteur p a en CSS va nous permettre d’appliquer des styles à tous les éléments a contenus dans des éléments p et seulement aux éléments a contenus dans des éléments p

See the Pen Cours HTML CSS 3.4.4 by Pierre (@pierregiraud) on CodePen.

Appliquer des styles aux enfants directs d’un autre élément

Nous allons également pouvoir cibler uniquement un élément ou un groupe d’éléments enfants directs d’un autre élément en utilisant le signe de supériorité stricte ou le caractère chevron fermant >.

Un élément est un enfant direct ou « descendant direct » d’un autre élément s’il est directement contenu dans celui-ci.

Par exemple, nous allons pouvoir appliquer des styles à tous les liens (éléments a) qui sont des enfants directs de l’élément body et uniquement à ceux-ci :

See the Pen Cours HTML CSS 3.4.5 by Pierre (@pierregiraud) on CodePen.

Sélectionner l’élément suivant directement un autre élément en CSS

Le CSS va nous permettre de cibler encore plus précisément un élément en ciblant l’élément suivant directement un autre élément grâce au caractère +.

Par exemple, on va pouvoir cibler les éléments a (liens) suivant directement un élément p :

See the Pen Cours HTML CSS 3.4.6 by Pierre (@pierregiraud) on CodePen.

Sélectionner tous les éléments suivant un autre élément en CSS

Le caractère ~ va nous être plus permissif que le caractère + en nous permettant cette fois-ci de sélectionner tous les éléments déclarés après un autre élément en HTML de même niveau (c’est-à-dire possédant le même parent direct).

Par exemple, on va pouvoir cibler tous les éléments a placés après un élément p et qui sont de même niveau :

See the Pen Cours HTML CSS 3.4.7 by Pierre (@pierregiraud) on CodePen.

Ici, nos styles CSS ne s’appliquent pas à aux deux liens dans notre paragraphe et dans notre élément de liste car ceux-ci ne sont pas au même niveau que les différents paragraphes de notre page : ils sont inclus dans d’autres éléments et ne possèdent donc pas le même parent qu’un autre paragraphe pouvant les précéder.

Résumé des caractères spéciaux permettant de combiner des sélecteurs et signification

Vous pourrez trouver ci-dessous un résumé des différents caractères vus dans cette partie et qui vont nous permettre de combiner des sélecteurs CSS simples afin d’en créer des plus complexes :

Sélecteur CSS	Signification
*	Sélectionne tous les éléments
E, F	Sélectionne tous les éléments de type E et de type F
E F	Sélectionne tous les éléments F à l’intérieur des éléments E
E > F	Sélectionne les éléments F enfants directs des éléments E
E + F	Sélectionne tout élément F placé directement après un élément E
E~F	Sélectionne tout élément F placé après un élément E dans la page