Les 5 sélecteurs de bases à savoir par coeur !

Les sélecteurs de css3

Le CSS permet de fabriquer toute la présentation graphique d’un site, que ça soit la couleur, les images, la position des éléments, les animations bref, tout le thème d’un site. Mais le CSS ne serait rien sans ses sélecteurs, voici une petite liste des sélecteurs de bases qui permettent de faire pratiquement tout ! C’est parti !

Mais déjà, c’est quoi un sélecteur ? Un sélecteur permet de définir un ou plusieurs éléments sur lesquelles on va appliquer des règles CSS. En gros, le sélecteur permet de cibler des éléments HTML comme des liens, des tableaux ou des paragraphes pour ensuite lui mettre une couleur de fond.

Il y a plusieurs manières de sélectionner un élément d’une page web, on va voir une petite liste de sélecteurs qui sont les plus basiques.

X : le sélecteur de type

X étant l’élément en lui même, c’est un des sélecteurs les plus simples. On choisit n’importe quel élément X dans la page web et on lui applique une règle.

div{
	background-color : red;
}

Dans cet exemple div étant X, tous les éléments div vont avoir une couleur de fond rouge !

* : le sélecteur universel

ce sélecteur permet de cibler absolument tous les éléments pour leur appliquer une règle.

*{
	position : absolute;
}

Dans cet exemple, tous les éléments seront positionnés comme étant absolus, les paragraphes, les liens, les images, tous !

.X : le sélecteur de classe

X étant le nom d’une classe, elle permet de cibler tous les éléments qui ont un attribut « class » et dont la valeur contient X

.maClasse{
	margin : 2px;
}

Dans cet exemple, si j’ai un <div class= »maClasse »> dans ma page web, elle aura une marge de 2px de chaque côté ! Un élément html peut avoir plusieurs classes, ce qui fait de ce sélecteur un des plus puissants et des plus utilisés dans le CSS ! Les choses simples sont les meilleures. 🙂

#X : Le sélecteur d’identifiant

X étant le nom d’un identifiant, elle permet de cibler l’élément qui a l’identifiant X, et je dis bien l’élément, car par principe, l’identifiant est unique dans une page web. Deux éléments ne peuvent avoir le même identifiant, pour cibler plusieurs éléments, il vaut mieux utiliser une classe qui est faite pour ça.

#monId{
	display : inline-block;
}

Si j’ai un élément <div id= »monId »>, même chose, il sera affiché en tant que « inline-block ».

[X=Y] : le Sélecteur d’attribut

Voilà un sélecteur un petit peu plus complexe, mais qui permet d’élargir les possibilités du CSS. X étant l’attribut d’un élément HTML et Y étant la valeur de cet attribut.

[target=_blank]{
	color : red;
}

Dans cet exemple, tous les éléments HTML ayant un attribut « target » égal à « _blank » seront de couleur rouge, généralement ce sont les liens qui ont cet attribut. Petite note, on peut voir le sélecteur de classe « .X » comme [class= »X »] et le sélecteur d’identifiant « #X »  comme [id= »X »] ce qui revient exactement à la même chose.

Ce sélecteur peut prendre plusieurs formes, d’abord on peut très bien se passer de Y et donc de l’opérateur « = » ce qui donne tout simplement [X]. Cela ciblera donc tous les éléments avec l’attribut X peu importe la valeur de cet attribut.

[target]{
	color : red;
}

Ensuite, si on tient compte de la valeur de l’attribut, alors on peut modifier l’opérateur, le plus simple est [X=Y] qu’on a vu plus haut. Nous avons aussi [X*=Y] qui va sélectionner les éléments HTML dont l’attribut contient Y.

[href*=code-cool]{
	color : red;
}

Admettons que nous avons un lien <a href= »https://algocool.fr »>, si j’avais utilisé un simple « = », la règle si dessus ne s’appliquera pas sur mon lien, car l’attribut « href » n’est pas strictement égal à « code-cool », en revanche la valeur contient « code-cool », l’utilisation de [X*=Y] permet donc d’appliquer une couleur rouge à mon lien.

Enfin, nous avons [X^=Y] et [X$=Y] qui est tiré du regexp. C’est un peu le même principe de [X*=Y], simplement [X^=Y] sélectionne tout les attributs dont la valeur commence par Y, [X$=Y] sélectionnent quant a lui tous les attributs dont la valeur finie par Y.

[href^=https]{
	color : red;
}
[href*=fr]{
	color : red;
}

Dans ces exemples, si j’ai le même lien <a href= »https://algocool.fr »>, il sera en rouge.

Ces 5 sélecteurs sont des sélecteurs simples et vous servira tout le temps. Là ou c’est top, c’est qu’on peut les mixer pour faire un ciblage encore plus précis. X.Y#Z permet de sélectionner un élément de type X, qui possède une classe Y et un identifiant Z.

div.maClasse#monId{
	background-color : red;
}

Je vous laisse deviner cet exemple, si vous avez bien suivi les raisonnements plus haut, cela ne devra pas être trop compliqué 😎 Bien sûr, on aurait aussi pu ajouter un sélecteur d’attribut.

Attention : il est important de bien coller les sélecteurs simples pour pouvoir les utiliser ensemble, si vous ajoutez une espace cela voudra dire carrément autre chose. La suite au prochain article sur les sélecteurs.

A++ 🙂

 

 

Partager l’article :
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.