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.

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; }

Le prochain Sélecteur le plus utile est celui qui cible les descendants. Quand vous devez être plus spécifiques quant à vos éléments, utilisez-le. PAr exemple si vous souhaitez non pas cibler tous les titres de votre page mais plutôt les titres se trouvant dans des listes ordonnées, vous pourrez utilisez ce sélecteur. En l’occurence li a

compatibilité

Firefox

Chrome

Opera

Safari

IE6+

5 - X

a { color: blue;} ul { margin-right : 2;}

Lorsque vous souhaitez cibler tous les éléments de votre page non pas pas leur classe ou leur ID mais plutôt par leur type, utilisez ce Sélecteur. Si vous souhaitez cibler tous les liens, utilisez 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;}

Utilisez la pseudo classe 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; }

La différence entre le sélecteur 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>

Dans cet exemple, #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; }

Le Sélecteur 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; }

Connu sous le nom de Sélecteur d’attributs, ce sélecteur ciblera les éléments 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.