Les sélecteurs simples en CSS

Objectif

Connaitre les sélecteurs en CSS

Introduction

Un sélecteur CSS permet de définir un ensemble de règles CSS sur un élément HTML. Il existe plusieurs types de sélecteurs que nous allons détailler dans ce chapitre.

On appelle “sélecteur de balise” (ou “sélecteur d’éléments”) le ou les mots clés précédant l’accolade et servant à indiquer le ou les balises du document auxquelles le style entre accolades s’applique.

Il y a différents types de sélecteurs dans CSS.
Nous aborderons également les combinateurs qui vont permettre d’associer plusieurs sélecteurs afin de cibler des éléments précis ou encore d’obtenir des combinaisons qui vont se révéler très pratiques. L’union fait la force comme on dit.
Parmi les sélecteurs dits “simples”, nous retrouvons plusieurs familles de sélecteurs :

Sélecteurs de type
Sélecteurs groupés
Sélecteurs universels
Sélecteurs descendants
Sélecteurs d’identifiant
Sélecteurs de classe
Sélecteurs d’attribut

Les sélecteurs simples en CSS

Source de l’image :https://moodle.iutv.univ-paris13.fr/img/web/corrections/tp3.html

Sélecteur de type

« sélecteur de type » (parfois appelé « sélecteur de balise » ou Sélecteur d’élément)
Un sélecteur de type est simplement un sélecteur qui prend une seule balise HTML pour en faire de mise en forme
Si par exemple vous devez cibler toutes les listes non ordonnées, utilisez simplement ul {}.
Il s’agit de la sélection la plus simple, puisque le sélecteur est constitué du nom de l’élément sans les caractères de début < et de fin de balise/>.
Nous inscrivants par exemple:

p {color : yellow ; background-color : blue;}

pour que le texte de tous les paragraphes figure en jaune sur fond bleue;
Nous pouvons ainsi définir un style propre à chaque élément comme il en existe un par défaut dans les navigateurs

Sélecteurs regroupés

Afin de réduire les déclarations répétitives dans les feuilles de style, le regroupement de sélecteurs et de déclarations est autorisé.
On peut appliquer le même style à plusieurs éléments par la sélection de plusieurs éléments différents en les énumérant et en les séparent par une virgule dans le sélecteur. plutôt que de manipuler les définitions:

h1 {color : black ; background-color : red;}
div {color : black ; background-color : red;}
p {color : black ; background-color : red;}

nous pouvons écrire le style suivant :

hl,div,p {color : black ; background-color : red;}

Cette possibilité de regroupement peut être utile pour définir des styles communs à un ensemble d’éléments en écrivant ce type de sélecteur pour cet ensemble, puis en ajoutant d’autres propriétés spécifiques à un des éléments de la liste.
On définit ainsi une sorte de tronc commun à un groupe, puis on affine chacun de ses composants.
Si nous écrivons par exemple le code suivant :

h1,div,p {color : black ; background-color : red;}
div {margin : 20px;}

l’élément <div> va avoir à la fois un texte noir, un fond rouge et une marge de 20 pixels, car la propriété margin, définie uniquement pour l’élément <div>, s’ajoute à celles déjà définies pour le sélecteur d’éléments hl,div,p.

Sélecteur universel

Pour appliquer un style à tous les éléments, nous utiliserons le sélecteur universel * avant la définition d’une ou plusieurs propriétés.
Par exemple, pour que la couleur de fond de tous les éléments soit le jaune, nous écrirons :

 *{background-color : yelloW;}

Cela n’empêche pas de modifier cette couleur de fond pour un élément particulier, en la redéfinissant pour celui-ci, par exemple:

*{background-color : yellow;}
p{background-color : gray;}

Dans ce cas, tous les éléments ont un fond jaune, sauf
qui a un fond gris redéfini spécialement.

Sélecteurs Contextuels ou sélecteurs descendants

Les sélecteurs contextuels sont des chaînes de deux sélecteurs simples ou plus, séparés par des espaces.
Ces sélecteurs peuvent se voir attribuer des propriétés normales et, en raison des règles d’ordre en cascade, ils auront priorité sur les sélecteurs simples.

Par exemple, le sélecteur contextuel de P strong { color: blue }

Cette règle indique que le texte mis en gras dans un paragraphe doit avoir une couleur bleu.

Le texte en gras dans un titre ne serait pas affecté.

Exemple

<ul id="liste1">
    <li>abc
    <li>def
</ul>

<ul id="liste2">
    <li>xyz
    <li>rst
</ul>

Supposons qu’on veuille changer uniquement la couleur des “li” de la deuxième liste. li {color: red;}
ne marche pas, car elle change la couleur des “li” dans les deux listes.
On peut utiliser un sélecteur composé de deux sélecteurs simples: #liste2 li {color: red;}
L’espace entre “#liste2” et “li” est très important: il veut dire “descendant de“.

Donc: “#liste2 li” veut dire “tous les li qui sont descendants de #liste2

Sélecteur d’identifiant (id)

Ce sélecteur simple permet de cibler un élément d’un document en fonction de la valeur de son attribut id.
L’élément d’une page qui possède l’ID fourni (pour une page HTML donné, on ne peut avoir qu’un seul élément pour un ID donné).
Un sélecteur d’identifiant (ID selector) permet, pour un document HTML, de cibler un élément grâce à la valeur de son attribut id.

/* L'élément avec l'identifiant id="demo" */
#demo {
  border: red 2px solid;
}

Sélecteur de classe

Un sélecteur de classe est un sélecteur simple permet de cibler les éléments en fonction de la valeur de leur attribut class.
Avec le sélecteur de classe il est possible d’appliquer des styles différents pour des éléments HTML d’un même type.
Représenté par un astérisque (*), le sélecteur universel correspond à un élément de n’importe quel type. Dans le CSS3, il a été étendu pour être combiné avec des espaces de noms.
Classe qui s’applique à un seul élément HTML

Par exemple, si nous souhaitons que certains paragraphes (<p>) soient affichés en rouge (disons, pour mettre en évidence des paragraphes importants), et que d’autres paragraphes aient un alignement centré, nous pouvons définir deux classes pour chacun de types de paragraphe :

p.introduction{text-align:center} p.important{color:red}

Dans le document HTML, l’attribut class permet de choisir la classe qui sera utilisée :

<p class="introduction">Un paragraphe d’introduction</p> <p class="important">Un paragraphe important</p>

Classe qui s’applique à tous les éléments HTML

Pour définir une classe qui s’applique à tous les éléments HTML, et pas uniquement à un seul élément HTML (comme <p> dans l’exemple ci-dessus), on utilise la syntaxe suivante : l’élément HTML n’est pas écrit ; on commence directement par un point, suivi du nom de la classe.

Exemple : .important{color:red}

Ainsi, la classe important pourra être utilisée pour tous les éléments HTML :

alt;h1 class="important">Un titre important </h1> <p class="important">Un paragraphe important </p>

Sélecteur d’attribut

Dans le HTML, nous avons vu les attributs d’un élément. En CSS, on peut utiliser ces attributs pour cibler les éléments.
Les sélecteurs d’attribut permettent de cibler un élément selon la présence d’un attribut ou selon la valeur donnée d’un attribut.

Applications

Cours CSS

Les sélecteurs d’attribut en CSS

Les cours

Les cours

CSS

Les sélecteurs simples en CSS