Les sélecteurs CSS sont très utiles. Cependant, ces derniers sont largement méconnus. A tort. On entend beaucoup parler des grandes transformations et évolutions qu’apportent CSS3 mais on oublie trop souvent les bases. Une bonne utilisation des sélecteurs CSS peut améliorer votre productivité au jour le jour en vous permettant de coder de manière plus simple et plus élégante. Aujourd’hui, nous allons (re)découvrir 10 sélecteurs CSS qui souvent dorment dans un coin de notre cerveau et que l’on utilise rarement alors qu’ils sont hyper efficaces.
*
Le sélecteur * est sans doute celui dont on se rappelle le plus facilement mais il est pourtant sous-utilisé. Son action : Styliser tout les éléments de la page et permettre (entre autres) de créer une remise à zéro (CSS reset). Vous pouvez aussi l’utiliser pour créer des styles par défaut (font-family ou taille de police par exemple).
* {
margin: 0;
padding: 0;
font-family: helvetica, arial, sans-serif;
font-size: 16px;
}
A + B
Ce sélecteur est appelé « sélecteur adjacent » car il permet de sélectionner l’élément qui se trouve juste après le premier élément. Si vous vouliez sélectionner la « div » juste après votre « header » par exemple, vous devriez taper :
header + div
{
margin-top: 50px;
}
A > B
Ce sélecteur ne sélectionne que les éléments enfants directs contrairement à A B qui lui sélectionnera les éléments enfants au niveau de A. Ce sélecteur est recommandé lorsque vous travaillez avec des éléments enfants de premiers niveau d’un élément parent. Par exemple, si vous voulez sélectionner le premier niveau des éléments de liste dans une liste non ordonnée qui ressemble à ceci:
<ul>
<li>List Item With ul
<ul>
<li>Sub list item</li>
<li>Sub list item</li>
<li>Sub list item</li>
</ul>
</li>
<li>List Item</li>
<li>List Item</li>
</ul>
Vous devrez utiliser ce sélecteur parce que le sélecteur A B habituel sélectionnera aussi les listes imbriquées à l’intérieur de la première liste :
ul > li
{
background: black;
color: white;
}
A[href*="example"]
Celui-ci est une très bonne méthode quand vous voulez styliser un lien différemment des autres. Ce qui est entre les guillemets sera comparé avec l’URL présente dans le href. Ainsi, pour styliser en bleu les liens qui pointent vers Facebook et uniquement ceux-là, vous pourrez écrire :
a[href*="facebook"]
{
color: blue;
}
Il existe aussi une version sans * qui permet de styliser un lien en renseignant/comparant une URL précise.
A:not(B)
Ce sélecteur est particulièrement utile en raison de sa négation qui vous permet de sélectionner un groupe d’éléments qui ne correspond pas à B. Si vous voulez sélectionner toutes les div sauf le « footer » :
div:not(.footer)
{
margin-bottom: 40px;
}
A:first-child / A:last-child
« First-child » et « Last-Child » nous permettent de sélectionner le premier et le dernier enfant d’un élément parent. Cela peut être très utile quand vous voulez enlever les « margin » ou « borders » du premier et du dernier élément d’une liste par exemple. Pour cela, vous aurez besoin d’écrire :
ul li:first-child
{border: none;
}
ul li:last-child
{margin-right: 0px;
}
A:nth-child(n)
« nth-child » est une manière simple de sélectionner un élément enfant par son ordre d’apparition. Par exemple, vous souhaitez sélectionner le troisième « li » d’une liste non-numérotée :
ul li:nth-child(3)
{
background: #ccc;
}
On peut aussi utiliser « nth-child » pour sélectionner tous les multiples d’un nombre en utilisant la variable « n ». Par exemple, si on met « 3n », cela sélectionnera 3, 6, 9, 12 etc…
A:nth-last-child(n)
« nth-last-child » fonctionne comme « nth-child » mais à la place de compter à partir du premier élément de la liste, il compte à partir du dernier. Donc si vous utilisez le chiffre 2, cela va sélectionner le deuxième élément de la liste à partir de la fin :
ul li:nth-last-child(2)
{
background: #ccc;
}
A:nth-of-type(n)
Ce sélecteur fait exactement ce que vous pensez : il voit ce que voit ce que vous avez mis et il sélectionner, par exemple, le troisième élément de votre page qui correspond à ce que vous avez renseigné. Pour sélectionner le troisième paragraphe dans une div, on pourra écrire :
div p:nth-of-type(3)
{
font-style: italic;
}
A:visited
Avez-vous déjà remarqué que les liens vers les sites que vous avez déjà visité apparaissent en violet sur Google ? C’est exactement ce que ce sélecteur fait : Changer la couleur des liens qui pointent vers les sites que vous avez déjà visité. Pratique, hein ? Et pourtant si souvent oublié…
a:visited
{
color: red;
}
Pour finir…
Ces sélecteurs sont très pratiques et ce n’est que le début, il y en a plein d’autres que nous verrons sans doute dans un prochain article !
Source & Image