Les 30 Sélecteurs CSS à connaître pour vos Web Designs
1ère partie
Les 10 premiers sélecteurs CSS
Même si vous utilisez un Constructeur de Pages pour réaliser vos Designs, un jour ou l’autre vous aurez besoin d’effectuer des modifications qui ne sont pas prévus dans votre outil. Vous soulèverez le capot pour y introduire vos propres modifications CSS. Que ce soit sous Elementor avec son éditeur convivial et performant ou avec n’importe quel autre Builder tel que Divi, Oxygen ou Beaver Builder, vous devez connaître les 30 SÉLECTEURS CSS que tout développeur de Site se doit de connaître.
1 - *
* {
margin: 0;
padding: 0;
}Découvrons tout d’abord le plus évident des sélecteurs CSS. Le sélecteur Étoile désigne tous les éléments de la page. Si vous souhaitez par exemple réinitialiser toutes les marges et marges internes de tous les éléments de la page, le code ci-dessus effectuera cette opération. A utiliser avec parcimonie car le navigateur Web l’appliquera à tous les éléments ce qui prendra et des ressources et du temps.
Il est également à noter que l’opérateur Étoile peut s’utiliser avec les sélecteurs enfants :
#mon-conteneur * {
border: 1px solid blue;
}Le code ci-dessus ciblera tous les éléments enfants du conteneur d’ID mon-conteneur. A utiliser avec parcimonie.
compatibilité
Firefox
Chrome
Opera
Safari
IE6+
2 - #X
#conteneur {
width: 820px;
margin: auto;
}
En utilisant le symbole Hashtag (#) avant le nom du sélecteur, on cible l’élément par son ID. C’est une façon normale d’accéder aux éléments par leurs ID. Attention : on ne peut pas avoir plusieurs ID identiques par page.
En utilisant le symbole Hashtag (#) avant le nom du sélecteur, on cible l’élément par son ID. C’est une façon normale d’accéder aux éléments par leurs ID. Attention : on ne peut pas avoir plusieurs ID identiques par page.
compatibilité
Firefox
Chrome
Opera
Safari
IE6+
3 - .X
.ma_classe {
color: blue;
}
Voici le Sélecteur de Classe. La différence entre l’ID et la Classe est qu’avec cette dernière on peut cibler plusieurs éléments à la fois et les styliser en une seule opération. Par exemple si l’on donne la même classe aux titres de sa page, on changera en une seule fois toutes les tailles grâce au sélecteur Classe.
compatibilité
Firefox
Chrome
Opera
Safari
IE6+
4 - X Y
li a {
textdecoration: underline;
}
li acompatibilité
Firefox
Chrome
Opera
Safari
IE6+
5 - X
a { color: blue;}
ul { margin-right : 2;}
a {}, pour toutes les listes non ordonnées ul {}compatibilité
Firefox
Chrome
Opera
Safari
IE6+
6 - X:visited et X:link
a { color: blue;}
ul { margin-right : 2;}
link pour cibler les liens qui n’ont pas encore été cliqués.La pseudo classe visited quant à elle permet d’appliquer un style aux liens qui ont déjà été cliqués (visités).compatibilité
Firefox
Chrome
Opera
Safari
IE7+
7 - X + Y
ul + p {
color : blue;
}
On appelle ce Sélecteur le Sélecteur Adjacent. Il cible uniquement l’élément qui est précédé par l’élément précédent. Dans cet exemple seulement le premier paragraphe situé après chaque liste non ordonnée sera de couleur bleue.
compatibilité
Firefox
Chrome
Opera
Safari
IE7+
8 - X > Y
div#conteneur > ul {
border: 1px solid black;
}
X Y et X > Y est que ce dernier cible uniquement les descendants directs du premier. Voici un exemple :<div id="conteneur">
<p>
<ul>
<li> Element 1 </li>
<li> Element 2 </li>
</ul>
</p>
<ul>
<li> Element A </li>
<li> Element B </li>
</ul>
</div>#conteneur > ul ciblera uniquement les listes non ordonnées qui sont les enfants directs de l’élément qui a comme ID conteneur. La première liste qui se trouve dans un paragraphe p ne sera pas ciblée.compatibilité
Firefox
Chrome
Opera
Safari
IE7+
9 - X ~ Y
ul ~ p {
color: blue;
}
X ~ Y est du même type que le sélecteur précédent X + Y. Il est cependant moins restrictif. Alors que le sélecteur X + Y ciblera uniquement le premier sélecteur suivant le sélecteur X, le sélecteur X ~ Y ciblera tout élément Y pourvu qu’il se trouve aprés un sélecteur X. Dans notre exemple les éléments p qui suivent un sélecteur ul.compatibilité
Firefox
Chrome
Opera
Safari
IE7+
10 - X[title]
a[title] {
color : blue;
}
X qui possèdent un attribut titre. Dans l’exemple ci-dessus les liens qui possèdent un attribut Titre seront ciblés et affichés en bleu.compatibilité
Firefox
Chrome
Opera
Safari
IE7+
Pour résumer, il est important de bien choisir les sélecteurs utilisés pour optimiser au mieux la vitesse de chargement et d’exécution de la page Internet. En cas de doute, il y a trois recommandations importantes : Testez, testez et testez !
Dans notre prochain article, nous découvrirons les autres sélecteurs CSS qu’il est impératif de connaître et de se rappeler.
Une réponse