Chaque fois que nous utilisons CSS, nous utilisons des sélecteurs. Mais malgré cela, les sélecteurs CSS sont l'une des parties les plus négligées de la spécification.
On parle des grandes transformations en CSS3 mais on oublie trop souvent les bases. Le bon usage des sélecteurs rend notre codage quotidien plus simple et plus élégant. Aujourd'hui, je vais couvrir les 10 sélecteurs qui nous échappent souvent, mais qui sont à la fois efficaces et très utiles.
Le sélecteur peut être celui dont vous vous souvenez le plus facilement, mais il est souvent sous-utilisé. Ce qu'il fait est de tout styliser sur la page et c'est génial pour créer une réinitialisation et aussi pour créer des valeurs par défaut comme la famille de polices et la taille que vous souhaitez avoir.
* {margin: 0;padding: 0;font-family: helvetica, arial, sans-serif;font-size: 16px;}Ce sélecteur est appelé sélecteur adjacent et ce qu’il fait est de sélectionner l’élément situé immédiatement après le premier élément. Si vous souhaitez sélectionner le premier div après notre en-tête, tapez:
header + div {margin-top: 50px;}Ce sélecteur ne sélectionnera que les enfants directs contrairement à AB qui sélectionnera des enfants de niveau A. Ce sélecteur est recommandé lorsque vous travaillez avec des enfants de premier niveau d'un élément parent. Par exemple, si vous souhaitez sélectionner les éléments de la liste de premier niveau dans une liste non ordonnée qui ressemble à ceci:
- List Item With ul
- Sub list item
- Sub list item
- Sub list item
- List Item
- List Item
Vous utiliseriez ce sélecteur car le sélecteur AB habituel sélectionnera également les éléments de la liste dans la liste non ordonnée imbriquée.
ul > li {background: black;color: white;}C'est un très bon sélecteur pour quand vous voulez donner un style différent à un lien particulier, tout ce qui est entre guillemets sera comparé avec le href du lien. Par exemple, pour styliser tous les liens vers Facebook avec la couleur bleue que vous utiliseriez:
a[href*="facebook"] {color: blue;}Il existe également une version sans le * qui correspond à l'URL exacte que vous pouvez utiliser pour des liens exacts.
Ce sélecteur est particulièrement utile à cause de sa clause de négation qui vous permet de sélectionner n'importe quel groupe d'éléments qui ne correspondent pas à ce que vous placez dans B. Si vous souhaitez sélectionner chaque div sauf le pied de page dont vous avez besoin:
div:not(.footer) {margin-bottom: 40px;}Le premier enfant et le dernier enfant nous permettent de sélectionner le premier et le dernier enfant de l’élément parent. Cela peut être d'une grande aide lorsqu'il s'agit de lister des éléments et de supprimer la marge droite ou les bordures. Pour supprimer la bordure du premier élément de la liste et la marge du dernier élément de la liste, vous avez besoin:
ul li:first-child {border: none;}ul li:last-child {margin-right: 0px;}Le n-child est un moyen simple pour sélectionner un enfant d'un élément par son ordre. Si, par exemple, vous vouliez le troisième élément de liste dans une liste non ordonnée, ce serait la voie à suivre:
ul li:nth-child(3) {background: #ccc;}Nous pouvons utiliser nth-child pour sélectionner chaque multiplicateur d'un nombre en utilisant la variable n, par exemple si nous mettons 3n, il sélectionnerait l'élément numéro 3, 6, 9, 12 et ainsi de suite.
Le nth-last-child fonctionne comme le n-child mais au lieu de compter le premier élément de la liste, il commence à compter à partir du dernier, donc si vous l'utilisez avec le numéro deux, il sélectionnera l'élément de liste avant le dernier et son utilisation est juste comme le sélecteur nth-child:
ul li:nth-last-child(2) {background: #ccc;}Ce sélecteur fait exactement ce que vous pensez qu'il fait; il voit quel type d'élément vous avez placé et sélectionne, par exemple, le troisième élément de votre page qui correspond à ce que vous avez tapé. Pour sélectionner le troisième paragraphe d'un div, vous utiliseriez:
div p:nth-of-type(3) {font-style: italic;}Avez-vous déjà remarqué que lorsque vous recherchez quelque chose sur Google, les pages que vous avez déjà vues apparaissent dans une couleur différente? C'est exactement ce que fait la visite. Ceci est un excellent ajout pour les utilisateurs mais il est parfois oublié et par mon expérience, il est pratique chaque fois que je recherche google.
a:visited {color: blue;}D'après mon expérience de l'utilisation de ces types de sélecteurs, le codage peut nous permettre de gagner beaucoup de temps et d'éviter de surcharger de nombreux ID. Et ce n'est que le début des sélecteurs CSS, il y a beaucoup plus de sélecteurs qui sont vraiment pratiques mais parfois oubliés.
Utilisez-vous des sélecteurs CSS dans vos feuilles de style? Est-il plus facile de recourir aux identifiants et aux classes? Faites le nous savoir dans les commentaires.
Image / vignette en vedette, image de code via Shutterstock.