Savoir comment utiliser les sélecteurs CSS 2.1
et les nouveautés CSS 3

Le sélecteur d'attribut basique correspond aux éléments qui ont l'attribut spécifié indépendamment de la valeur de l'attribut.

L'exemple suivant appliquera un fond rouge à tous les liens qui possèdent un attribut title.

a[title] { background-color: red; }

Ce sélecteur d'attribut est utilisé pour sélectionner les éléments qui contiennent un attribut spécifique avec une valeur particulière.

L'exemple suivant appliquera un fond rouge à tous les liens qui possèdent un attribut rel avec la valeur external.

a[rel=external] { background-color: red; }

Certains attributs autorisent une liste de valeurs séparées par des espaces. En utilisant le "~" avant le caractère "=", vous pouvez positionner un style sur les éléments qui possèdent un attribut spécifique avec une valeur particulière présente dans la liste des valeurs.

L'exemple suivant appliquera un fond rouge à tous les paragraphes qui contiennent la classe attention.

p[class~=marseille] { background-color: red; }
/* p[class~=marseille] est équivalent à p.marseille */

Ce sélecteur d'attribut est utilisé pour sélectionner les éléments qui possèdent un attribut spécifique et dont la valeur est une liste de mots séparés par des tirets et commençant par val.

L'exemple suivant appliquera le style sur les liens avec un hreflang dont la valeur commence par "en", incluant "en-US", "en-GB", etc.

a[hreflang|=en] { background-color: red; }

Plusieurs sélecteurs d'attributs peuvent être utilisés dans la même instruction.

L'exemple suivant utilise 2 sélecteurs d'attribut pour appliquer un fond rouge à tous les liens qui ont un attribut title et dont l'attribut rel à la valeur external.

a[title][rel~=external] { background-color: red; }

La pseudo-classe :first-child correspond au premier élément enfant d'un autre élément.

div > p:first-child { text-indent: 0; }

La pseudo-classe :link s'applique aux liens qui n'ont pas été visités et la pseudo-classe :visited s'applique lorsque le lien a été visité par l'utilisateur.

Les pseudo-classes dynamiques appliquent un changement de style en fonction d'une action utilisateur. La pseudo-classe :hover applique un style quand l'utilisateur désigne un élément (par exemple au survol de la souris), la pseudo-classe :active applique un style quand l'utilisateur active un élément (par exemple au moment où l'utilisateur presse le bouton de la souris et le relâche) et la pseudo-classe :focus applique un style quand un élément reçoit l'attention (par exemple quand l'utilisateur se positionne sur l'élément à l'aide du clavier).

a:link { color: red }       /* lien non-visité */
a:visited { color: blue }   /* lien visité */
a:hover { color: yellow }   /* lien survolé */
a:active { color: lime }    /* lien activé */

La pseudo-classe :lang permet de cibler un élément dont la langue correspond à une certaine valeur.

p:lang(en) { background-color: red; }

Le pseudo-élément :first-line associé à un paragraphe produit un style particulier sur la première ligne formatée d'un paragraphe.

p:first-line { text-transform: uppercase; }

Le pseudo-élément :first-letter peut être employé pour faire des capitales initiales et des lettrines.

Les pseudo-élément :before et :after servent à insérer un contenu généré avant ou après celui d'un élément.

Ce sélecteur vous permet de cibler les éléments en se basant sur leur position dans la liste des enfants de leur parent. Vous pouvez utiliser un numéro, une expression numérique ou les mots "odd" et "even" correspondant à impair et pair (parfait pour faire un style alternatif pour vos tableaux).

tr:nth-child(2n+1) /* correspond aux lignes paires */
tr:nth-child(odd) /* pareil */

Ce sélecteur ressemble beaucoup au sélecteur précédent sauf qu'il correspond au dernier enfant d'un élément parent.

tr:nth-last-child(-n+2) /* correspond aux 2 dernières lignes du tableau */

Identique à :nth-last-child(1). La pseudo-classe :last-child représente un élément qui est le dernier fils d'un autre élément.

Correspond aux éléments qui sont cochés.

Correspond aux éléments qui n'ont pas d'enfants ou qui sont vides.

La pseudo-classe de négation est une notation fonctionnelle prenant un sélecteur simple pour argument. Elle représente un élément qui n'est pas représenté par l'argument.

L'exemple ci-dessous permet d'afficher le texte des paragraphes qui n'ont pas la classe "lead" en noir.

p:not([class*="lead"]) { color: black; }

Les navigateurs basés sur le moteur Webkit ou Opera supportent toutes les nouveautés CSS 3 des sélecteurs de pseudo-classe. Firefox 2 et 3 supporte uniquement :not(s), :last-child, :only-child, :root, :empty, :target, :checked, :enabled et :disabled, mais Firefox 3.5 aura un support complet des sélecteurs CSS 3. Internet Explorer n'a actuellement aucun support de ces pseudo-classes.

Le nouveau pseudo-élément ::selection s'applique à la portion du document qui a été mise en exergue par l'utilisateur.

L'exemple suivant permet de modifier la couleur de fond du texte en cours de sélection.

::selection { background-color: blue; }