Chrome, Safari, Opera, Firefox 4, Internet Explorer 9

Voici un tableau sur la syntaxe des sélecteurs en CSS2 (référence W3C traduit sur yoyodesign : ) :

Motif

SignifC

orresicatio* éléme

Cor à tout él ( él

pondECorrerespon à tout nt. E c.à.d., un descde type E).

EC F à to émentélé q e émentu l l'élé E.

orresndE > utF mentélém F ui st nenfa endant de'élém ment

spondCorE:fi cà tout él F aussi un pr dee E. él p

pondCorreresporst-E:lin hildE:visià un ent E aussi le nt nfant entde son arent. (:

E:C E:à E:ul émentélé q e emieru an da l'la émentso d le li n p é vi (:li o bi l' é vis

orresk,nd ted 'élémn ment E ui st certaine creactio ns utilisa urce ont en 'a as té sité nk) u en a éjà té ited

active,spondE:laCor hover,à focusl'é E au courim de e del déter l sp la doc ).

pondCorreng(c)respo à lémeent de type smédiE qui mploienes nsune angue teur.c (la mina de cette angue est écifiq au du ume

E[fEC + à Fto élé pré "fop u élé E. ngage

E[foo]orresoo="E[foospnd ntut mentélém F atem cédél'attri o" (qar n ment valeu tion ue nt).

Cornd à tout él E avec l'a qu'e soienexa les v "w

warnipondCorrerespo~="w à tout ent E entdont but "foo"uelles na ctem la rs).aleur arnin sép cara "war

CE[ =à to émentélé d ttributl'att "f a p val u li val p d bla et cod u cell ci e

orresng"]DIV.warnindlang| "en" ut mentélém E ont l'attriribut oo""lan ourent eurvale ne g".ste de eursvaleu sépararées ar es ctèrestiret n ontmme ne degauc es- st ning".

spondSe à] tout Id E dont a pour une liste de par des cettes liste (à par "en".

ulempog"] en HTML. entiqu à but g" ur rs ées s, nçant he)

arningd

CorrespondE#myidnt à

tout

élémente

E

DIV[class~="warning"].dont l'ID est

"myid".

Les nouveautés incluent entre autres les sélecteurs d'attributs, le combinateur d'adjacence directe, les pseudoclasses et les pseudo-éléments.

Il y a 3 nouveaux sélecteurs

[attr^="stringValue"]

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

Exemple :

 

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

[attr$="stringValue"]

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

Exemple :

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

[attr*="stringValue"]

Ce sélecteur permet de sélectionner un élément DOM dont l'attribut "attr" comporte au moins une fois la valeur "stringValue".

Exemple :

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

Permet d'ajouter un style à tous les éléments qui suivent un élément particulier.

Exemple :

Plusieurs pseudo-classes ont été ajouté : :root

Ce sélecteur représente un élément qui est la racine d'un document. Par exemple, en HTML 4, l'élément est html.

: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 être un nombre, une expression numérique ou un mot clé tel que "odd" ou "even".

Exemple :

.exampleTable{   width:100%;   border:1px solid #444;  }  .exampleTable tr:nth-child(even){ //tous les enfants aux numéros pairs   background:#999999;   text-shadow: 2px 2px 5px #111;   color:#fff;  }  .exampleTable tr:nth-child(odd){ //tous les enfants aux numéros 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 numéro 7   background:#006400;   text-shadow: 2px 2px 2px #fff;   color:#000;  }

:nth-last-child(expression)

Ce sélecteur accepte les mêmes arguments que :nth-child() et correspond au dernier enfant d'un élément parent.

C'est le même principe que le :nth-child() sauf que l'on part de la fin.

Exemple :

 

.exampleTable2{   width:100%;   border:1px solid #444;  }  .exampleTable2 tr:nth-last-child(odd){ /*tous les enfants aux numéros 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 numéro 7 en partant de la fin donc la 2ème ligne du tableau.*/   background:#006400;   text-shadow: 2px 2px 2px #fff;   color:#000;  }

:last-child

Correspond à  :nth-last-child(1) .

:first-child

Correspond à  :nth-child(1) . :nth-of-type(expression)

Ce sélecteur représente un élément qui a expression frères du même type devant lui dans l'arbre DOM.

alternance de la position des images en flottant.

:nth-last-of-type(expression)

Ce sélecteur représente un élément qui a expression - 1 frères du même type après lui dans l'arbre DOM.

représente tous les h2 fils d'un élément XHTML body sauf le premier et le dernier.

:first-of-type

Correspond à :nth-of-type(1). :first-of-type représente un élément qui est le premier enfant de son type dans la liste des enfants de son élément parent.

:last-of-type

Correspond à :nth-last-of-type(1). Représente un élément qui est le dernier enfant de son type dans la liste des enfants de son élément parent.

:only-child

Correspond à un élément qui n'a aucun frère. Cette pseudo-classe correspond à  :first-of-type:last-of-type  ou :nth-of-type(1):nth-last-of-type(1) .

:checked

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

:contains(value)

Correspond aux éléments dont le contenu textuel contient la sous-chaîne donnée en argument.

Exemple :

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

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

:empty

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

:not([expression])

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

Exemple:

:target

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

Exemple :

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".

::first-line

Applique la règle de style à la premiere ligne du texte de l'élément.

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

::first-letter

Applique la règle de style à la première lettre du texte de l'élément.

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

::selection

Applique la règle de style à la sélection du texte de l'élément faite par l'utilisateur.

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 après un contenu d'un élément.

Ces pseudo-elements existent en CSS2.1 sous forme :before et :after.

Merci à pour sa relecture.