Comprendre et utiliser les sélecteurs css

Les sélecteurs css, tout le monde connait car si vous maitrisez un minimum les css, vous avez obligatoirement utilisé au moins un sélecteur css dans votre vie ( :hover pour mettre un effet au rollover sur un lien).

Ayant parcouru beaucoup de forums et de tutoriels en tout genre sur le sujet, j’ai remarqué que le sujet qui revenait le plus souvent était les sélecteurs comme X:not(), X:nth-child(n)…des sélecteurs qui bien sûr font rêver, mais qui ne sont compatibles qu’à partir de la version 9 d’internet explorer pour la plupart. (sauf utilisation de framework css).

Dans cet article dédié aux sélecteurs css, j’ai voulu faire le point sur les sélecteurs réellement utilisables en production en 2012 et laisser de côté la magie des sélecteurs de « demain » pour avoir un point de vue objectif entre le bon et le mauvais. À noter que je n’intègre plus les sites internet pour ie6 car j’estime que ce navigateur est obsolète donc cet article concerne les navigateurs ie7+, Firefox,  Chrome, Safari et  Opera.

Sélecteur *

Le sélecteur * cible tous les éléments de la page, il est essentiellement utilisé pour faire un reset de certains éléments en css.

Compatibilité :   IE6+ /  Firefox /    Chrome /   Safari /    Opera

* {   margin: 0;  }

#id

Le sélecteur d’ID permet de cibler un élément par un identifiant unique. Plusieurs éléments d’une même page ne peuvent pas avoir le même identifiant.

Compatibilité : IE6+ / Firefox / Chrome / Safari / Opera

#content { width: 900px; margin:0 auto; }

.classe

Les sélecteurs de classe sont utilisés pour cibler plusieurs éléments.

Compatibilité : IE6+ / Firefox / Chrome / Safari / Opera

.laclasse { font-size:75%; }

X Y

Utilisez le sélecteur descendant pour être plus spécifique. Pluôt que de cibler toutes les balise de lien, l’exemple ci-dessus cible seulement celles qui sont à l’intérieur d’un élément de liste.

Compatibilité : IE6+ / Firefox / Chrome / Safari / Opera

ul li { margin:15px; }

X

Les sélecteurs de type permettent de cibler un élément grâce à son type.

Compatibilité :  IE6+ / Firefox / Chrome / Safari / Opera

p { padding-bottom:10px; }

 X:link et X:visited

a:link pour tous les liens qui n’ont pas été visités et a:visited pour tous les liens déjà visités.

Compatibilité: IE7+ / Firefox / Chrome / Safari / Opera

a:link { color: #ccc; }
a:visited { color:red; }

X + Y

Ce sélecteur correspond à tout élément Y immédiatement précédé par un élément X.

Compatibilité :  IE7+ / Firefox / Chrome / Safari / Opera

ul + div { font-weight:bold; }

X > Y

Ce sélecteur permet de cibler l’élément Y directement derrière X.

Compatibilité :  IE7+ / Firefox / Chrome / Safari / Opera

ul > li { font-size:75% }

X[lol]

Correspond à tout élément X ayant un attribut lol.

Compatibilité :  IE7+ / Firefox / Chrome / Safari / Opera

input[type=text] { border:1px solid red;  }

X[href= »http://www.perdu.com/ »]

Sélecteur qui permet de cibler un styler un lien particulier

Compatibilité :  IE7+ / Firefox / Chrome / Safari / Opera

a[href="http://www.perdu.com"] { color: #1f6053; }

X:hover

Pour appliquer un style au survol d’un élément

Compatibilité :  IE6+ / Firefox / Chrome / Safari / Opera

a:hover { text-decoration:none; }

X:first-letter

Permet d’appliquer un style à la première lettre d’un élément

Compatibilité :  IE6+ / Firefox / Chrome / Safari / Opera

p:first-letter { font-weight: bold; }

X:first-child

Pseudo-classe permettant de cibler le premier enfant de l’élément parent.

Compatibilité :    IE7+ / Firefox /  Chrome /  Safari /  Opera

.ul li:first-child { border: none; }