Les sélecteurs en CSS3

Les sélecteurs d'attributs permettent par le biais d'une "requete CSS" d'atteindre un ensemble de noeud dans un document HTML ainsi d'en donner un style

Ces "requètes" sont des règles de reconnaissance de motifs qui déterminent les règles de style qui s'appliquent aux éléments du DOM

En CSS3, il y a donc des nouveautés au niveau des sélecteurs afin d'ateindre des noeuds dans le DOM de maniere encore plus précise

Rappel

voici une tableau sur la syntaxe des sélecteurs en CSS2 ( référence W3C: Les sélecteurs)

MotifSignification
*Correspond à tout élément.
ECorrespond à tout élément E (c.à.d., un élément de type E).
E FCorrespond à tout élément F qui est un descendant de l'élément E.
E > FCorrespond à tout élément F aussi un enfant de l'élément E.
E:first-childCorrespond à un élément E aussi le premier enfant de son élément parent.
E:link
E:visited
Correspond à un élément E qui est une ancre dans la source dont le lien n'a pas été visité (:link) ou bien l'a déjà été (:visited).
E:active
E:hover
E:focus
Correspond à l'élément E au cours de certaines actions de l'utilisateur.
E:lang(c) Correspond à l'élément de type E qui emploie une langue c (la détermination de cette langue est spécifique au langage du document).
E + FCorrespond à tout élément F immédiatement précédé par un élément E.
E[foo]Correspond à tout élément E avec l'attribut "foo" (quelles qu'en soient les valeurs).
E[foo="warning"]Correspond à tout élément E dont l'attribut "foo" a exactement la valeur "warning".
E[foo~="warning"]Correspond à tout élément E dont l'attribut "foo" a pour valeur une liste de valeurs séparées par des caractères blancs et dont une de celles-ci est "warning".
E[lang|="en"]Correspond à tout élément E dont l'attribut "lang" a pour valeur une liste de valeurs séparées par des tirets, cette liste commençant (à gauche) par "en".
DIV.warningSeulement en HTML. Identique à DIV[class~="warning"].
E#myidCorrespond à tout élément E dont l'ID est "myid".

Les nouveautés CSS3

Les sélecteurs d'attributs

Il y a 3 nouveaux sélecteurs

[attr^="stringValue"]

Ce sélecteur permet de selectionner un élement DOM dont l'attribut "attr" commence exactement par la valeur "stringValue"

Exemple:

CSS

p.example{ margin:0; padding:10px; color:#000; } p.example[title^="ess"]{ color:#fff; background:#333; }

HTML

<p class="example"> je n'ai pas d'attribut title</p> <p class="example" title="comment"> j'ai un attribut title mais il ne commence pas par "ess"</p> <p class="example" title="essai"> j'ai un attribut title commençant par "ess"</p> <p class="example" title="esson"> j'ai un attribut title commençant par "ess" également</p>

Démo

je n'ai pas d'attribut title

j'ai un attribut title mais il ne commence pas par "ess"

j'ai un attribut title commençant par "ess"

j'ai un attribut title commençant par "ess" également

[attr$="stringValue"]

Ce sélecteur permet de selectionner un élement DOM dont l'attribut "attr" finit exactement par la valeur "stringValue"

Exemple:

CSS

p.example2{ margin:0; padding:10px; color:#000; } p.example2[title$="sai"]{ color:#fff; background:#045FB4; }

HTML

<p class="example2"> je n'ai pas d'attribut title</p> <p class="example2" title="comment"> j'ai un attribut title mais il ne commence pas par "ess"</p> <p class="example2" title="essai"> j'ai un attribut title commençant par "ess"</p> <p class="example2" title="esson"> j'ai un attribut title commençant par "ess" également</p>

Démo

je n'ai pas d'attribut title

j'ai un attribut title mais il ne finit pas par "sai"

j'ai un attribut title finissant par "sai"

j'ai un attribut title finissant par "sai" également

[attr*="stringValue"]

Ce sélecteur permet de selectionner un élement DOM dont l'attribut "attr" à au moins une fois la valeur "stringValue"

Exemple:

CSS

p.example3{ margin:0; padding:10px; color:#000; } p.example3[title*="val"]{ color:#fff; background:#990000; }

HTML

<p class="example3"> je n'ai pas d'attribut title</p> <p class="example3" title="comment"> j'ai un attribut title mais il ne contient pas "val"</p> <p class="example3" title="val"> j'ai un attribut title contenant au moins "val"</p> <p class="example3" title="evaluer"> j'ai un attribut title contenant au moins "val" également</p> <p class="example3" title="eval"> j'ai un attribut title contenant au moins "val" également</p>

Démo

je n'ai pas d'attribut title

j'ai un attribut title mais il ne contient pas "val"

j'ai un attribut title contenant au moins "val"

j'ai un attribut title contenant au moins "val" également

j'ai un attribut title contenant au moins "val" également

Le combinateur d'adjacence directe

Permet d'ajouter un style à tous élements qui suivent un élément particulier

Exemple:

CSS

.example4 div{ margin:0; padding:10px; color:#000; } .example4 div~p{ color:#fff; margin:20px; width:200px; padding:5px; border:1px solid #333; background:#006644; }

HTML

<div class="example4"> <div>je suis l'élément particulier div</div> <p> je suis un p qui suit le div (l'élement particulier)</p> <p>je suis un p qui suit le div (l'élement particulier)</p> <span>je suis un span</p> <p>je suis un p qui ne suit pas le div (l'élement particulier)</p> </div>

Démo

je suis l'élément particulier div

je suis un p qui suit le div (l'élement particulier)

je suis un p qui suit le div (l'élement particulier)

je suis un span

je suis un p qui ne suit pas le div (l'élement particulier)

Les pseudo-classes

Plusieurs pseudo-classes ont été ajouté:

:nth-child(expression)

Ce sélecteur permet de cibler tous les éléments en se basant sur leur position dans la liste des enfants de leur parent

expression peut etre un nombre, une expression numérique ou un mot clé tel que "odd" ou "even"

exemple

CSS

.exampleTable{ width:100%; border:1px solid #444; } .exampleTable tr:nth-child(even){ //tous les enfants aux numeros pairs background:#999999; text-shadow: 2px 2px 5px #111; color:#fff; } .exampleTable tr:nth-child(odd){ //tous les enfants aux numeros impairs background:#990000; color:#fff; } .exampleTable tr:nth-child(3n){ //tous les 3 enfants background:#045FB4; color:#fff; } .exampleTable tr:nth-child(7){ //l'enfant numero 7 background:#006400; text-shadow: 2px 2px 2px #fff; color:#000; }

HTML

<table class="exampleTable"> <tr> <td>1ere ligne</td> </tr> <tr> <td>2eme ligne</td> </tr> <tr> <td>3eme ligne</td> </tr> <tr> <td>4eme ligne</td> </tr> <tr> <td>5ere ligne</td> </tr> <tr> <td>6eme ligne</td> </tr> <tr> <td>7eme ligne</td> </tr> <tr> <td>8eme ligne</td> </tr> </table>

Démo

1ere ligne
2eme ligne
3eme ligne
4eme ligne
5ere ligne
6eme ligne
7eme ligne
8eme ligne

:nth-last-child(expression)

Ce sélecteur accepte les meme arguments que :nth-child() et correspond au dernier enfant d'un élement parent

C'est le meme principe que le :nth-child() sauf que l'on part de la fin

Exemple:

CSS

.exampleTable2{ width:100%; border:1px solid #444; } .exampleTable2 tr:nth-last-child(odd){ //tous les enfants aux numeros impairs depuis la fin background:#990000; color:#fff; } .exampleTable2 tr:nth-last-child(-n+2){ //les 2 derniers enfants background:#045FB4; color:#fff; } .exampleTable2 tr:nth-last-child(7){ //l'enfant numero 7 en partant de la fin donc la 2eme ligne du tableau background:#006400; text-shadow: 2px 2px 2px #fff; color:#000; }

HTML

<table class="exampleTable2"> <tr> <td>1ere ligne</td> </tr> <tr> <td>2eme ligne</td> </tr> <tr> <td>3eme ligne</td> </tr> <tr> <td>4eme ligne</td> </tr> <tr> <td>5ere ligne</td> </tr> <tr> <td>6eme ligne</td> </tr> <tr> <td>7eme ligne</td> </tr> <tr> <td>8eme ligne</td> </tr> </table>

Démo

1ere ligne
2eme ligne
3eme ligne
4eme ligne
5ere ligne
6eme ligne
7eme ligne
8eme ligne

:last-child

Correspond à :nth-last-child(1)

:first-child

Correspond à :nth-child(1)

:checked

Correspond aux éléments cochés d'un formulaire

:contains(value)

Correspond aux éléments dont le contenu textuel contient la sous chaine donnée en argument

Par exemple

p:contains('essai'){ background:#900; }

signifie que tous les éléments "p" contenant la sous chaine "essai" auront pour couleur d'arriere plan, la valeur '#900'.

L'usage de la pseudo-classe de contenu (:contain) est restreint aux media statiques.

:empty

Correspond aux éléments n'ayant pas d'enfant

:not([expression])

Réprésente un élement qui n'est pas représenté par l'expression donnée en argument

Exemple:

button:not([DISABLED]){ ... } a:not(:visited){ ... }

:target

Représente un élément qui est la cible de l'URI.

Exemple

p:target { background:#900}

Tout élement p qui sera la cible de l'URI (via l'ID # en tant que ancre) aura pour couleur d'arrière plan la valeur "#900".

Les pseudo-elements

::first-line

Applique la regle de style à la premiere ligne du texte de l'élément

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

La 1ère ligne de ou des éléments p est mise en majuscule

::first-line

Applique la regle de style à la premiere lettre du texte de l'élément

p::first-letter { font-size: 2em }

La 1ère lettre de ou des éléments p a une taille de police de 2em.

::selection

Applique la regle de style à la sélection du texte de l'élément faite par l'utilsateur

p::selection { background:#006644 }

A la sélection, le texte sélectionné aura une couleur d'arrière plan de valeur '#006644'

::before et ::after

Génère un contenu avant ou apres un contenu d'un élément.

ces pseudo-elements existe en CSS2.1 sous forme :before et :after

Dans l'article suivant, nous verrons les combinateurs CSS3

retourner en haut de la page