Vous êtes ici : Accueil > Cours > CSS > les sélecteurs

Les sélecteurs CSS c'est quoi ?

Un sélecteur 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.

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.

Les sélecteurs simples :

Parmi les sélecteurs dits "simples", nous retrouvons plusieurs familles de sélecteurs :

  • -Sélecteurs de type
  • -Sélecteurs de classe
  • -Sélecteurs d'identifiant
  • -Sélecteurs universels
  • -Sélecteurs d'attribut

Le sélecteur de type :

Le sélecteur de type est utilisé seul. Il cible un élément du même type dans un document. Dans le code ci-dessous, on indique que tous les éléments de type h1 dans le document auront la couleur rouge.



h1{

color: red

}





<h1>Mon titre de couleur rouge<h1>



Le sélecteur de classe

Le sélecteur de classe cible chaque élément d'un document portant le même nom via l'attribut HTML class.



.maclasse{

color: red

}





<p class="maclasse">mon texte en rouge</p>

<div class="maclasse">mon texte en rouge</div>


Le sélecteur d'identifiant

Le sélecteur d'identifiant permet de cibler un élément via le nom de l'attribut HTML id. Celui-ci doit être le même que celui de l'élément visé dans le document.

💡 Un identifiant est unique. Vous ne pouvez l'utiliser qu'une seule fois dans un document.



/*ici on vise l'élément p dans le document qui possède un identifiant qui se nomme monID*/

p#monID {

color:red

}





<p id="monID">mon texte en rouge</p>


Le sélecteur universel

Représenté par un astérisque (*), le sélecteur universel correspond à un élément de n'importe quel type. Dans le troisième niveau CSS, il a été étendu pour être combiné avec des espaces de noms.



/*tous les éléments du document auront la couleur rouge */

* {

  color: red
  
}


Le sélecteur d'attribut

Le sélecteur d'attribut permet de cibler un élément ayant un attribut avec ou sans valeur. Il existe plusieurs types de sélecteurs d'attribut :

[attr] : cible un élément possédant un attribut.



/* Les éléments a avec l'attribut title */

a[title] {

  color: red
  
}


[attr=valeur] : cible un élément possédant un attribut avec une valeur.



/*tous les éléments p en langue française auront la couleur rouge*/

p[lang=fr] {

  color: red
  
}	

[attr~=valeur] : cible un élément possédant un attribut dont la valeur appartient à une liste de valeurs séparées par des espaces.



/*on vise tous les liens qui contiennent entre autres le mot exemple */

a[title~="exemple"] {

color: red

}


Sera visé l'élément a avec l'attribut title ayant pour mots-clé "mon exemple", "ceci est un exemple" ...

[attr|=valeur] : cible un élément possédant un attribut spécifié en commençant par la valeur nommée dans l'attribut. Celle-ci peut être seule ou suivie d'un tiret.



/*on vise la classe commencant par le mot exemple, vise également exemple-motclé ou exemple-autremotclé... */

[class|="exemple"] {

   color: red
   
}	
	

[attr^=valeur] : cible un élément possédant un attribut dont la première valeur commence par celle-ci. Elle peut aussi être suivie d'un tiret.



[class^="maclasse"] {
	
color: red
	
	
}		
	

[attr$=valeur] : cible un élément possédant un attribut dont la dernière valeur se termine par celle-ci. Elle peut être précédée d'un tiret.



[class$="maclasse"] {
	
color: red
	
	
}	
	

[attr*=valeur] : cible un élément possédant un attribut dont la valeur contient au moins une occurrence d'une chaîne de caractères correspondant à celle-ci.



/* vise tous les liens dont l'url contient "exemple" */

a[href*="exemple"] {


color:red


}

Ajouté dans le quatrième niveau, le sélecteur d'attribut case-sensitivity (voir compatibilité), insensible à la casse, qui peut s'écrire avec un i minuscule ou majuscule, provoque l'adaptation de la valeur de l'attribut d'une manière ASCII.



a[href="#exemple" i] {
color: #614ad3
}    
    

Lien utilisant le sélecteur d'attribut case-sensitivity

Lien utilisant le sélecteur d'attribut case-sensitivity

Vous pouvez remarquer que les deux liens ont la même couleur (violet), pourtant l'identifiant n'est pas écrit de la même manière. Voir le code ci-dessous :



<a href="#eXeMple">Lien utilisant le sélecteur d'attribut case-sensitivity</a>
<a href="#exeMple">Lien utilisant le sélecteur d'attribut case-sensitivity</a>


Les combinateurs :

Comme son nom l'indique, le combinateur va permettre d'associer plusieurs sélecteurs afin d'appliquer une valeur spécifique sur un élément précis.

On distingue quatre types de combinateurs :

Combinateur descendant :

Représenté par un espace (un blanc) entre deux sélecteurs. Bientôt remplacé par deux chevrons dans le quatrième niveau de CSS.



div /*le blanc est ici*/ p{

background-color: purple;
color: white;

}

/*niveau 4*/ 

div>>p{

...

}


Exemple combinateur descendant

Combinateur enfant :

Sépare deux sélecteurs. Ne sélectionne que les enfants directs du premier sélecteur.



div > p{

background-color: purple;
color: white;

}

/*Seul le premier élément enfant est visé par rapport à son parent*/

Exemple combinateur enfant

Combinateur direct :

Permet de sélectionner un élément immédiatement précédé par un autre élément.



p+p {

background-color: purple;
color: white;

}

/*ici on permet de viser l'élément enfant qui suit le premier élément enfant à condition que les deux élément possèdent le même élément parent*/

Exemple combinateur direct

Combinateur voisin général :

Même fonction que le voisin direct mais sélectionne tous les éléments frères.



h1~p {

background-color: purple;
color: white;

}


Exemple combinateur voisin général

Combinateur de colonne (niveau 4) :

Actuellement en production... Nous y reviendrons lorsque son implantation sera effective.

Votre navigateur est trop ancien pour afficher le contenu de ce site.