Sur cette page :

  1. Les pseudo-sélecteurs
    1. Sélecteur par attribut
    2. Pseudo-classes et pseudo-éléments
      1. Pseudo-classes
      2. :first-child
      3. :link
      4. :active
      5. :hover
      6. :visited
      7. :focus
      8. :lang
      9. Les pseudo-éléments
      10. :first-line
      11. :first-letter
      12. :before et :after

15.1# Sélecteur par attribut

La sélection par attribut permet de discriminer une sélection par nature d’élément, identifiant ou classe selon la présence d’attributs et de leur valeur. Le sélecteur par attribut est placé entre crochets à la droite d’un sélecteur simple :

  1. /* Sélectionne l'ensemble des liens référençant le parent de la page courante */
  2. a[rel=up]
  3.  
  4. /* Sélectionne l'ensemble des liens référençant le parent et dont la langue est précisée */
  5. a[rel=up][hreflang]

Il est possible de tester la valeurs des attributs selon plusieurs méthodes :

  • [attr] teste la présence de l’attribut attr, aucun test sur la valeur n’est effectué,
  • [attr=valeur] sélectionne les éléments possédant un attribut attr et dont la valeur est exactement valeur,
  • [attr~=valeur] sélectionne les éléments possédant un attribut attr et dont la valeur contient le mot valeur, les mots sont séparés par des espaces dans l’attribut : 
    1. img[alt~=animal]
    2. { border: 1px red solid; }
    1. <img src="images/mon_chat.jpg" alt="Photographie de mon animal de compagnie : mon chat félix" />
    L’image sera entourée d’une bordure rouge d’un pixel,
  • [attr|=valeur] sélectionne les éléments possédant un attribut attr et dont la valeur commence par valeur : 
    1. *[lang=en]
    2. { color: blue; }
    2.   En anglais les vacances se disent <em lang="en">Hollidays</em>,
    3.   mais les américains disent plutôt <em lang="en-US">Vacation</em>.
  • Icone Mozilla Firefox supporté
  • Icone Microsoft Internet Explorer supporté à partir de la version 7
  • Icone Safari supporté
  • Icone Opera supporté
  • Icone Chrome supporté

15.2# Pseudo-classes et pseudo-éléments

15.2.1# Pseudo-classes

Les pseudo-classes permettent de sélectionner un élément sans pouvoir le caractériser par sa forme dans l’arbre des éléments HTML, c’est à dire, sans sa nature, son identifiant, l’une de ses classes ou encore ses attributs. Il est possible de combiner plusieurs pseudo-classes, par exemple a:link:visited, cependant, ceci peut parfois poser des problèmes avec Internet Explorer.

15.2.2# :first-child

:first-child sélectionne un élément si celui-ci est le premier d’un nœud :

  1. .contenu > p:first-child { color: grey; }
  1. <div class="contenu">
  2.   <p>Je serais en gris !</p>
  3.   <p>Je serais de la couleur définie par le mécanisme d'héritage !</p>
  • Icone Mozilla Firefox supporté, mais sur Firefox 2, si un élément est inséré comme premier fils avec Javascript l’élément devenu deuxième fils est toujours sélectionné
  • Icone Microsoft Internet Explorer supporté à partir de la version 7, cependant, si un élément est inséré comme premier fils avec Javascript l’élément devenu deuxième fils est toujours sélectionné
  • Icone Safari supporté
  • Icone Opera supporté
  • Icone Chrome supporté

:link sélectionne l’élément si celui-ci est un lien hypertexte.

  1. a { color: green; }
  2. a:link { color: red; }
  1. <a id="une_ancre">Une ancre, en vert !</a>
  2. <a href="http://example.com" id="une_autre_ancre">Un lien, donc en rouge !</a>
  • Icone Mozilla Firefox supporté
  • Icone Microsoft Internet Explorer supporté, cependant, un bug est apparu sous la version 7 : le pseudo élément est ignoré si le sélecteur contient :link:visited
  • Icone Safari supporté
  • Icone Opera supporté
  • Icone Chrome supporté

15.2.4# :active

:active sélectionne un élément quand l’utilisateur l’active, par exemple, pendant qu’il clique dessus avec la souris

  • Icone Mozilla Firefox supporté
  • Icone Microsoft Internet Explorer supporté seulement pour un élément <a> contenant l’attribut href avant la version 8
  • Icone Safari supporté
  • Icone Opera supporté
  • Icone Chrome supporté

15.2.5# :hover

:hover sélectionne un élément lorsque l’utilisateur interagit avec celui-ci sans l’activer, notamment en passant le curseur de la souris dessus.

  • Icone Mozilla Firefox supporté
  • Icone Microsoft Internet Explorer supporté seulement pour un élément <a> contenant l’attribut href avant la version 7, quelques bugs peuvent apparaître avec la version 7
  • Icone Safari supporté
  • Icone Opera supporté
  • Icone Chrome supporté

15.2.6# :visited

:visited sélectionne l’élément si il représente un lien qui a été visité par l’utilisateur (généralement, si celui-ci est toujours dans l’historique).

  • Icone Mozilla Firefox supporté
  • Icone Microsoft Internet Explorer supporté mais des bugs peuvent apparaître quand plusieurs pseudo-classes sont chaînées jusqu’à la version 7
  • Icone Safari supporté
  • Icone Opera supporté
  • Icone Chrome supporté

15.2.7# :focus

:focus sélectionne l’élément si l’élément à le focus, c’est-à-dire qu’il a été sélectionné par l’utilisateur est prêt à recevoir des informations tapées au clavier. Cette pseudo-classe s’applique généralement à des champs de formulaires.

  • Icone Mozilla Firefox supporté
  • Icone Microsoft Internet Explorer supporté à partir d’internet explorer 8, cependant, la perte du focus n’est pas détectée si le focus est ensuite attribué à un élément fils
  • Icone Safari supporté
  • Icone Opera supporté
  • Icone Chrome supporté

15.2.8# :lang

La pseudo-classe :lang permet d’effectuer des tests sur la langue d’un élément.

La syntaxe complète de la pseudo-classe est :lang(ln) où ln correspond au code représentant la langue recherchée, ou tout du moins, au début du code, on peut le comparer à [lang|=ln], mais sur ce point uniquement.

Il diffère du test sur les attributs HTML lang ou XHTML xml:lang par son aspect indépendant de la syntaxe du document sur lequel est appliquée la feuille de styles. Par ailleurs, cette pseudo-classe évalue la langue en fonction des éléments parents :

  1. <div lang="fr" xml:lang="fr">
  2.   <p>Mon paragraphe est très court !</p>

Ici, le pseudo-sélecteur :lang(fr) agira sur l’élément <div> mais également sur l’élément <p>, tandis que [lang|=fr] ne sélectionnera que l’élément <div>.

  • Icone Mozilla Firefox supporté
  • Icone Microsoft Internet Explorer supporté à partir d’internet explorer 8
  • Icone Safari supporté
  • Icone Opera supporté
  • Icone Chrome supporté

15.2.9# Les pseudo-éléments

Les pseudo-éléments permettent de désigner des emplacements qui ne sont pas explicitement décris par l’arbre HTML. Les pseudo-éléments ne peuvent s’appliquer que sur le dernier sélecteur d’une combinaison.

15.2.10# :first-line

Le pseudo-élément :first-line permet de sélectionner la première ligne de texte d’un élément.

  • Icone Mozilla Firefox supporté
  • Icone Microsoft Internet Explorer Avec Internet Explorer 6, un bug vous obligera à respecter la syntaxe :first-line[espace]{ /*propriétés*/ }
  • Icone Safari supporté
  • Icone Opera supporté
  • Icone Chrome supporté

15.2.11# :first-letter

:first-letter permet de sélectionner la première lettre d’un élément, pour appliquer des effets de lettrines par exemple.

  1. .article:first-letter
  2. {
  3.   font-size: 200%;
  4.   font-style: italic;
  5.   font-weight: bold;
  6.   float: left;
  7. }

Voilà le résultat ! Attention, si vous regardez le code source, vous verrez que pour obtenir ce résultat, j’ai triché… mais c’est pour la démonstration !

  • Icone Mozilla Firefox supporté, avant Firefox 3, la propriété letter-spacing n’est pas utilisable
  • Icone Microsoft Internet Explorer Avec Internet Explorer 6, un bug vous obligera à respecter la syntaxe :first-letter[espace]{ /*propriétés*/ }, avant la version 8, la propriété letter-spacing n’est pas utilisable
  • Icone Safari supporté
  • Icone Opera supporté
  • Icone Chrome supporté

15.2.12# :before et :after

:before et :after permettent d’insérer du contenu avant et après le contenu actuel d’un élément. La spécification CSS2 ne permet pas d’utiliser certaines propriétés sur ce contenu inséré, la version CSS 2.1 supprime ces limitations.

  1. pre.code:before
  2. {
  3.   content: "Listing de code :";
  4. }
  5. pre.code:after
  6. {
  7.   content: "Fin de listing de code.";
  8. }
  • Icone Mozilla Firefox supporté, cependant, certaines propriétés ne peuvent être utilisées, conformément à la spécification CSS2.
  • Icone Microsoft Internet Explorer Supporté à partir de la version 8
  • Icone Safari supporté
  • Icone Opera supporté, mais le contenu sera affiché en respectant les espaces de la valeur de la propriété content, comme si la propriété white-space était fixée à la valeur pre
  • Icone Chrome supporté

Vous trouverez sur Web Devout un tableau récapitulant le support des styles par les principaux navigateurs. N’hésitez pas à consulter la spécification officielle.