Webdesign,Webmaster

Les sélecteurs CSS

Publié le par stephanie
02
Juil

Voici les sélecteurs dont on a régulièrement besoin :

X:link et X:visited

a:link { color: blue; }
a:visited { color: purple; }

La pseudo-classe :link correspond à tous les liens qui n’ont pas été visités.

La pseudo-classe :visited correspond à tous les liens déjà visités.

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

X > Y

#container > ul { 
border: 1px solid black;
}

Contrairement au sélecteur descendant, le sélecteur d’enfant cible seulement le descendant direct.
Considérons le code suivant.

  • Elément de liste
    • Enfant <;/li>
  • Elément de liste <;/li>
  • Elément de liste <;/li>
  • Elément de liste <;/li>

Le sélecteur #contenu > ul cible tous les éléments ul qui sont descendants directs d’un bloc ayant pour id #contenu. Il ne ciblera pas, par exemple, l’élément ul descendant du premier li.
Compatibilité :  >IE7+ >Firefox >Chrome >Safari >Opera

X:hover

div:hover {
background: #e3e3e3;
}

Vous voulez appliquer un style particulier lorsque l’utilisateur survole un élément ?
L’élément :hover fera l’affaire.

Gardez à l’esprit que les anciennes versions d’Internet Explorer (IE6)
ne permettent pas l’utilisation de la pseudo-classe :hover
sur un élément autre que les balises d’ancrage (liens).

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

X[foo]

imput[type=text] {
color: green;
}

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

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

ressources  et autre sélecteurs :
http://www.tomsyweb.com/component/content/article/48-css/101-les-30-selecteurs-css-a-connaitre
http://reference.sitepoint.com/css/attributeselector

stephanie