Les selecteurs d’attribut en CSS3
le 16 septembre 2007 par sahid
Utiliser les sélecteurs en CSS pour embellir vos liens
Les sélecteurs de sous-chaine dans la valeur d’un attribut en CSS est une fonctionnalité particuliÚrement intéressant pour donner à vos liens ou autres éléments des styles particuliers sans pour autant avoir à utiliser une classe.
Syntaxe
- element[att^=”chaine”] La valeur de l’attribut att commence par chaine
- element[att$=”chaine”] La valeur de l’attribut att termine par chaine
- element[att*=”chaine”] La valeur de l’attribut att contient au moins une fois chaine
Exemple d’utilisation
Voyons comment les sélecteurs peuvent être utiles pour vos liens
-
a {
-
color:#444;
-
font-size:16px;
-
padding: 6px 0px 6px 36px;
-
}
-
/* liens vers … */
-
a[href*=“php.net”] {
-
background:url(‘php.png’) no-repeat 0 50%;
-
}
-
a[href*=“wikipedia.org”] {
-
background:url(‘wikipedia.png’) no-repeat 0 50%;
-
}
-
/* images, videos etc…*/
-
a[href$=“avi”], a[href$=“mpg”] {
-
background:url(‘video.png’) no-repeat 0 50%;
-
}
-
a[href$=“png”], a[href$=“jpg”] {
-
background:url(‘image.png’) no-repeat 0 50%;
-
}
-
/* mail */
-
a[href^=“mailto:”]{
-
background:url(‘mail.png’) no-repeat 0 50%;
-
}
Bien sûr vous pouvez utiliser tous types d’attribut, src, alt, rel, title etc…
Pour une utilisation avancée des sélecteurs, vous pouvez vous réferer
au site de la W3C
les icones sont tirées du projet Freedesktop Tango
Tableau de bord
4 octobre 2007 at 17:47
Oui c’est trÚs pratique et ça existe depuis un bon moment, malheureusement la plupart des personnes navigant sous IE, ne peuvent en profiter et beaucoup de developpeur ne font donc pas l’effort . Dommage.
5 octobre 2007 at 20:55
Merci pour la précision, il est vrai que je n’ai pas IE pour tester.
En fait c’est une particularité CSS3
IE, comme Firefox ne gere pas parfaitement CSS3, car cette version est toujours en phase de développement.