Les 30 Sélecteurs CSS À Absolument Connaître

Vous connaissez les slecteurs de base - id , class et descendant - et vous vous dites que
c'est dj bien suffisant ? Si c'est le cas, sachez que vous vous interdisez d'accder un
niveau de flexibilit insouponn. Mme si beaucoup des slecteurs mentionns dans cet
article appartiennent aux spcificits CSS3 et ne sont donc disponibles que dans les
navigateurs modernes, ne passez pas ct et essayez de les mmoriser.
1) *
1 *{
2 margin: 0;
3 padding: 0;
4 }
Commenons par les plus vidents, pour les dbutants, avant de passer aux slecteurs plus
avancs.
L'astrisque cible tous les lments de la page. Beaucoup de dveloppeurs utilisent cette
astuce pour remettre zro les marges s et les espacements . C'est parfaitement indiqu
pour des tests rapides mais je vous recommande de ne jamais recourir cette mthode dans
votre code en production : cela sollicite trop lourdement le navigateur et a n'est pas
indispensable.
Le symbole * peut aussi tre utilis avec des slecteurs d'enfants.
1 #container * {
2 border: 1px solid black;
3 }
Ceci cible tous les lments enfants de la div #container . L encore, essayez d'utiliser
cette technique le moins possible, voire pas du tout.
Compatibilit
IE6+ ; Firefox ; Chrome ; Safari ; Opera
2) #X
1 #container {
2 width: 960px;
3 margin: auto;
4 }
1
L'utilisation du symbole dise comme slecteur nous permet de cibler un lment par
son id . Ce slecteur d' id est probablement celui qui est le plus couramment utilis mais il
doit l'tre avec quelques prcautions.
Demandez-vous : est-ce que j'ai absolument besoin d'appliquer un id cet lment pour le
cibler ?
Les slecteurs d' id sont en effet trs rigides et ne permettent pas une rutilisation. Si
possible, essayez d'utiliser d'abord un nom de balise, un des nouveaux lments HTML5, ou
mme une pseudo-classe.
Compatibilit
3) .X
1 .error {
2 color: red;
3 }
Ceci est un slecteur de class e. La principale diffrence entre les id s et les class es est
que ces dernires vous permettent de cibler plusieurs lments. Utilisez des class es quand
vous souhaitez que votre mise en forme s'applique un groupe d'lments.
Alternativement, vous pouvez donc recourir aux id s, un peu comme on chercherait une
aiguille dans une botte de foin, et mettre en forme l'lment spcifique ainsi cibl, et lui
seul.
Compatibilit
4) X Y
1 li a {
2 text-decoration: none;
3 }
Le quatrime slecteur le plus rpandu est le slecteur descendant . C'est lui que vous
utilisez quand vous avez besoin d'tre plus spcifique avec vos slecteurs. Par exemple,
comment faire pour cibler non pas toutes les balises d'ancres mais seulement celles qui sont
comprises dans une liste non ordonne ? C'est typiquement le cas o vous ferez appel un
slecteur descendant.
Astuce pro - Si votre slecteur ressemble quelque chose comme X Y Z A B.error , c'est que
vous vous y tes mal pris. Demandez-vous toujours s'il est vraiment ncessaire de recourir
une syntaxe aussi lourde.
2
Compatibilit
5) X
1 a { color: red; }
2 ul { margin-left: 0; }
Imaginons que vous vouliez cibler tous les lments d'une page, non pas selon leur id ou
leur class mais selon leur type ? Faites simple et utilisez un slecteur de type. Par exemple,
si vous devez cibler toutes les listes non ordonnes, utilisez simplement ul {} .
Compatibilit
6) X:visited et X:link
1 a:link { color: red; }
2 a:visted { color: purple; }
La pseudo-classe :link est utilise pour cibler toutes les balises d'ancres qui ne sont pas
encore cliques.
Alternativement, la pseudo-classe :visited permet, comme vous l'aurez devin, d'appliquer
une mise en forme spcifique aux seules balises d'ancres de la page qui ont t cliques
ou visites.
Compatibilit
7) X + Y
1 ul + p {
2 color: red;
3 }
On appelle ceci un slecteur adjacent. Il permet de ne slectionner que l'lment qui est
immdiatement prcd par le premier lment cibl. Ici, par exemple, seul le premier
paragraphe aprs chaque ul comprendra du texte de couleur rouge.
Compatibilit
8) X > Y
1 div#container > ul {
3 }
3
La diffrence entre le X Y standard et X > Y est que ce dernier ne slectionnera que des
enfants directs. Par exemple, soit le balisage suivant :
<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
</ul>
</div>
Le slecteur #container > ul ne ciblera que les ul s qui sont enfants directs de la div avec
l' idcontainer . A l'inverse, il ne ciblera pas, par exemple, le ul qui est enfant du premier li .
Pour cette raison, l'utilisation de ce combinateur d'enfant apporte de vrais bnfices en
termes de performance. En fait, il est mme particulirement recommand de l'utiliser
quand on a recours des moteurs de slecteurs CSS bas sur du JavaScript.
Compatibilit
IE7 + ; Firefox ; Chrome ; Safari ; Opera
9) X ~ Y
1 ul ~ p {
2 color: red;
3 }
Ce combinateur de frres est proche de X + Y mais il est toutefois moins strict. Alors qu'un
slecteur adjacent ( ul + p ) ne cible que le premier lment immdiatement prcd du

premier slecteur, celui-ci a une porte plus gnrale. Il slectionne en effet, si l'on prend
l'exemple ci-dessus, n'importe quel lment p , du moment qu'ils suivent un ul .
Compatibilit
10) X[title]
1 a[title] {
2 color: green;
3 }
4
Ce slecteur d'attributs, comme on l'appelle, ne ciblera, dans l'exemple ci-dessus, que les
balises d'ancres qui ont un attribut title . Cette mise en forme spcifique ne sera donc pas
applique aux autres balises d'ancres. Oui, mais comment faire si on veut tre plus
spcifique ? Et bien...
Compatibilit
11) X[href="foo"]
1 a[href="http://net.tutsplus.com"] {
2 color: #1f6053; /* vert nettuts */
3 }
L'extrait de code ci-dessus appliquera une mise en forme toutes les balises d'ancres qui
contiennent un lien vers http://net.tutsplus.com ; elles prendront ainsi la couleur verte
associe notre marque. Toutes les autres balises d'ancres resteront inchanges.
Notez bien que la valeur est encadre par des guillemets. Ne les oubliez pas non plus quand
vous utilisez un moteur de slecteur CSS bas sur du JavaScript. A chaque fois que c'est
possible, utilisez les slecteurs CSS3 plutt que de recourir des mthodes non officielles.
Cela fonctionne plutt bien mais l'ensemble reste rigide. Imaginons que le lien dirige bien
vers Nettuts+, mais que, par exemple, le chemin est nettuts.com plutt que l'url complte ?
Dans ces cas prcis, il nous faut recourir une syntaxe d'expressions rgulires.
Compatibilit
12) X[href*="nettuts"]
1 a[href*="tuts"] {
2 color: #1f6053; /* vert nettuts */
3 }
Et voil. Exactement ce que nous voulions. L'toile indique que la valeur qui suit doit
apparatre quelque part dans la valeur de l'attribut. De cette faon, sont compris aussi
bien nettuts.com que net.tutsplus.com, et mme tutsplus.com.
Gardez bien l'esprit que c'est une dclaration plutt permissive. Que se passerait-il si la
balise d'ancre pointait vers un site n'appartenant pas Envato mais avec la chane tuts dans
son url ? Quand vous avez besoin d'tre plus spcifique, utilisez ^ et &dollar; pour
rfrencer, respectivement, le dbut et la fin d'une chane.
Compatibilit
IE7+ , Firefox ; Chrome ; Safari ; Opera
13) X[href^="http"]
1 a[href^="http"] {
2 background: url(path/to/external/icon.png) no-repeat;
5
3 padding-left: 10px;
4 }
Vous vous tes dj demand comment certains sites Web sont capables d'afficher une
petite icne ct de liens externes ? Je suis sr que vous en avez dj crois quelques-uns ;
ils sont l pour vous rappeler discrtement que le lien concern vous mnera un site
compltement diffrent.
C'est du gteau avec le symbole du caret. Il est le plus souvent utilis dans les expressions
rgulires pour rfrencer le dbut d'une chane. Si, par exemple, vous voulez cibler toutes
les balises d'ancres qui ont un href commenant par http , vous pouvez utiliser un bout de
code proche de celui que vous pouvez voir ci-dessus.
Notez que nous ne cherchons pas http:// ; ce n'est pas ncessaire et, par ailleurs, a ne
prendrait pas en compte les urls commenant par https:// .

Maintenant, imaginons que nous voulions mettre en forme toutes les ancres qui contiennent
un lien vers, disons, une photo ? Dans ces cas-l, cherchons la fin de la chane.
Compatibilit
14) X[href$=".jpg"]
1 a[href$=".jpg"] {
2 color: red;
3 }
L encore, nous utilisons un symbole des expressions rgulires, $ , pour identifier la fin
d'une chane. Ici, nous cherchons toutes les ancres qui contiennent un lien vers une image --
ou, au moins, une url qui finisse par .jpg . Gardez bien l'esprit que cela ne fonctionnera
videmment pas pour les gifs ni les pngs .

Compatibilit
15) X[data-*="foo"]
1 a[data-filetype="image"] {
2 color: red;
3 }
Reportez-vous au point 8 de cet article comment prendre en compte tous les types
d'images, png , jpeg,jpg , gif ? Et bien, nous pourrions par exemple crer des slecteurs
multiples :
1 a[href$=".jpg"],
2 a[href$=".jpeg"],
3 a[href$=".png"],
6
4 a[href$=".gif"] {
5 color: red;
6 }
Mais c'est un peu lourd mettre en place et pas vraiment efficace. Une autre solution
possible consisterait utiliser des attributs personnaliss. Et si nous ajoutions, par exemple,
notre propre attribut data-filetype chaque ancre qui pointe vers une image ?
1 <a href="path/to/image.jpg" data-filetype="image"> Image Link </a>
Ensuite, grce ce marquage, nous pouvons utiliser un slecteur d'attribut standard pour ne
cibler que ces ancres.
1 a[data-filetype="image"] {
2 color: red;
3 }
Compatibilit
16) X[foo~="bar"]
1 a[data-info~="external"] {
2 color: red;
3 }
4
5 a[data-info~="image"] {
7 }
Celui-ci est spcial et impressionnera vos amis. Peu de personnes connaissent cette astuce.
Le symbole tilde ( ~ ) nous permet de cibler un attribut qui a une liste de valeurs spares
par un espace.
Selon le principe d'attribut personnalis vu ci-dessus au point 15, nous pouvons crer
l'attribut data-info , qui contiendrait par exemple une liste de tout ce que nous souhaitons
prendre en note, en veillant simplement ce que les lments soient spars par des
espaces. Ici, nous noterons tous les liens extrieurs et les liens vers des images - juste pour la
dmonstration.
"<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>
Ce balisage en place, nous pouvons maintenant cibler toutes les balises qui ont une de ces
valeurs, en utilisant l'astuce du slecteur d'attributs ~.
1 /* Cible l'attribut data-info qui contient la valeur "external" */
2 a[data-info~="external"] { color: red; }
3
4 /* Et qui contient la valeur "image" */
5 a[data-info~="image"] {
7
7 }
Plutt ingnieux, non ?
Compatibilit
17) X:checked
1 input[type=radio]:checked {
3 }
Cette pseudo-classe ne ciblera un lment d'interface utilisateur que s'il a t coch
(checked) - comme un bouton radio ou une case cocher. C'est aussi simple que a.
Compatibilit
18) X:after
Les pseudo-classes before et after sont mchamment puissantes ! Tous les jours ou
presque, on trouve de nouvelles manires, souvent trs cratives, d'utiliser plein leur
norme potentiel. Elles servent tout simplement gnrer du contenu autour de l'lment
slectionn.
Beaucoup d'entre nous les ont rencontres pour la premire fois quand ils ont d utiliser
le hack "clear-fix.
.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.clearfix {
*display: inline-block;
_height: 1%;
}
Ce hack utilise la pseudo-classe :after pour ajouter un espace aprs l'lment puis le rend
invisible. Pensez garder cette ingnieuse astuce dans un coin de votre bote outils,
surtout pour les cas o la mthode overflow: hidden; n'est pas possible.
8
Pour une autre utilisation de ces pseudo-classes, reportez-vous mes petits conseils pour
crer des ombres.
Techniquement, selon les spcifications de slecteurs CSS3, vous devriez utiliser la syntaxe de
pseudo-lment du double "deux-points" :: . Concrtement, pour des raisons de
compatibilit, l'agent utilisateur accepte galement un unique "deux-points". En fait, il est
mme plus malin d'utiliser cet unique "deux-points" aujourd'hui.
Compatibilit
19) X:hover
1 div:hover {
2 background: #e3e3e3;
3 }
Allez, quand mme... Vous le connaissez, celui-l. Le terme officiel pour le dsigner
est pseudo-classe d'action utilisateur . Une expression un peu droutante mais en fait, c'est
vraiment trs simple. Vous voulez appliquer une mise en forme spcifique quand un
utilisateur survole un lment ? Avec a, considrez que le boulot est fait !
Gardez bien en tte que les versions les plus anciennes d'Internet Explorer ne ragissent pas
quand la pseudo-classe :hover est applique autre chose qu'une balise d'ancre.
Le plus souvent, vous utiliserez ce slecteur quand vous voudrez appliquer, par exemple,
un border-bottom des balises d'ancres, au survol.
1 a:hover {
2 border-bottom: 1px solid black;
3 }
Astuce pro - border-bottom: 1px solid black; rend mieux que text-decoration: underline; .
Compatibilit
IE6+ (Dans IE6, :hover doit tre appliqu un lment ancre)
Firefox ; Chrome ; Safari ; Opera
20) X:not(selector)
1 div:not(#container) {
2 color: blue;
3 }
La pseudo-classe negation est particulirement utile. Imaginons que je veuille slectionner
toutes les divs, sauf celle qui a l' id container . Le bout de code ci-dessus remplira cette
fonction merveille.
Imaginons encore que je veuille slectionner tous les lments de la page (pas conseill) sauf
les balises de paragraphes. Nous pourrions crire :
9
1 *:not(p) {
2 color: green;
3 }
Compatibilit
21) X::pseudoElement
1 p::first-line {
2 font-weight: bold;
3 font-size: 1.2em;
4 }
Nous pouvons utiliser des pseudo-lments (identifis par :: ) pour mettre en forme des
parties d'un lment, comme la premire ligne ou la premire lettre. N'oubliez pas qu'ils
doivent tre appliqus des lments de type block pour tre pris en compte.
Un pseudo-lment est compos d'un double "deux-points" : ::
Cibler la premire lettre d'un paragraphe
1 p::first-letter {
2 float: left;
3 font-size: 2em;
5 font-family: cursive;
6 padding-right: 2px;
7 }
Ce bout de code est une abstraction qui va chercher tous les paragraphes de la page puis
sous-cible seulement la premire lettre de cet lment.
Cette technique est le plus souvent utilise pour crer un effet "lettrine de journal" la mise
en forme de la premire lettre d'un article.
Cibler la premire ligne d'un paragraphe
1 p::first-line {
3 font-size: 1.2em;
4 }
De la mme manire, le pseudo-lment ::first-line met en forme, comme on peut s'y
attendre, la premire ligne de l'lment, et elle seule.
"Pour assurer la compatibilit avec les feuilles de style existantes, les agents utilisateurs
doivent aussi accepter l'ancienne notation de pseudo-lments - sous la forme d'un unique
"double-point" - qui a t introduite dans les niveaux 1 et 2 des CSS ( savoir, :first-line, :first-
10
letter, :before et :after). Cette compatibilit n'est pas autorise pour les nouveaux pseudo-
lments introduits dans cette spcification." - Source
Compatibilit
22) X:nth-child(n)
1 li:nth-child(3) {
2 color: red;
3 }
Vous vous rappelez de cette priode o il tait impossible de cibler des lments spcifiques
d'une liste ? La pseudo-classe nth-child est venue depuis notre rescousse !
Notez bien que si nth-child accepte un nombre entier comme paramtre, il ne repose pas
sur un systme base zro. Ainsi, si vous voulez cibler le deuxime lment d'une liste,
utilisez li:nth-child(2) .
On peut mme s'en servir pour slectionner un ensemble d'enfants au nombre variable. Par
exemple, nous pouvons crire li:nth-child(4n) pour slectionner tous les quatrimes
lments d'une liste.
Compatibilit
IE9+ ; Firefox 3.5+ ; Chrome ; Safari ; Opera
23) X:nth-last-child(n)
1 li:nth-last-child(2) {
2 color: red;
3 }
Imaginez que vous ayez une norme liste d'lments dans un ul et que vous vouliez
accder , disons, l'avant-avant-avant dernier (!) lment ? Plutt que d'crire li:nth-
child(397) , vous pouvez utiliser la pseudo-classe nth-last-child .

Cette technique fonctionne de manire presque identique celle du point 16 ci-dessus, la
seule diffrence qu'elle commence la fin de la collection et "remonte" ensuite la liste et ses
lments.
Compatibilit
24) X:nth-of-type(n)
1 ul:nth-of-type(3) {
11
3 }
Parfois, plutt que de slectionner un enfant , vous avez besoin de cibler selon
le type d'lment.
Imaginez un balisage qui contienne cinq listes non ordonnes. Si vous ne vouliez mettre en
forme que le troisime ul sans avoir votre disposition un unique id auquel vous
raccrocher, vous pourriez alors recourir la pseudo-classe nth-of-type(n) . Dans le bout de
code ci-dessus, seul le troisime ul sera ainsi entour d'une bordure noire.
Compatibilit
25) X:nth-last-of-type(n)
1 ul:nth-last-of-type(3) {
3 }
Et, oui, pour rester cohrent, vous pouvez galement utiliser nth-last-of-type pour
commencer la fin de la liste des slecteurs et, l encore, "remonter" jusqu' l'lment que
vous souhaitez cibler.
Compatibilit
26) X:first-child
1 ul li:first-child {
2 border-top: none;
3 }
Cette pseudo-classe structurelle permet de cibler uniquement le premier enfant de
l'lment parent. Cette technique est souvent utilise pour enlever les bordures du premier
et du dernier lment d'une liste.
Par exemple, imaginons que vous ayez une liste de lignes dont chacune a un border-top et
un border-bottom . Et bien, avec cet arrangement, vous verrez que le premier et le dernier
lment de cet ensemble auront l'air un peu curieux.
Beaucoup de designers appliquent les classes first et last pour remdier a.
Alternativement, vous pouvez utiliser ces pseudo-classes.
Compatibilit
12
27) X:last-child
1 ul > li:last-child {
2 color: green;
3 }
Contraire de first-child , last-child cible le dernier lment du parent.
Exemple
Construisons un exemple tout simple pour montrer une utilisation possible de ces classes.
Nous allons crer une liste d'lments et la mettre en forme.
Markup
1 <ul>
2 <li> List Item </li>
5 </ul>
Rien de spcial ici ; juste une liste toute simple.
CSS
01 ul {
02 width: 200px;
03 background: #292929;
04 color: white;
05 list-style: none;
06 padding-left: 0;
07 }
08
09 li {
10 padding: 10px;
11 border-bottom: 1px solid black;
12 border-top: 1px solid #3c3c3c;
13 }
Cette mise en forme va dfinir un fond, supprimer l'espacement par dfaut du navigateur
sur le ul et appliquer des bordures chaque li pour donner un peu de profondeur
l'ensemble.
Pour donner de la profondeur vos listes, appliquer chaque li un border-bottom qui est
d'une teinte lgrement plus fonce que la couleur de fond du li . Ensuite, appliquez
un border-top lgrement plus clair.
13
Le seul problme, comme vous pouvez le voir sur l'image ci-dessus, est que la bordure va
s'appliquer tout en haut et tout en bas de la liste non ordonne- ce qui fait curieux. Utilisons
les pseudo-classes :first-child et :last-child pour rparer la chose.
li:first-child {
1
border-top: none;
2
}
3
4
li:last-child {
5
border-bottom: none;
6
}
Et voil, rpar !
Compatibilit
IE9+
Firefox
Chrome
Safari
Opera
Et, oui, IE8 prend en charge :first-child ... mais pas :last-child . Allez savoir.
28) X:only-child
1 div p:only-child {
2 color: red;
3 }
Pour tre honnte, il y a peu de chances que vous utilisiez rgulirement la pseudo-
classe only-child . Elle reste toutefois disponible, si l'occasion se prsentait vous d'y
recourir.
Elle permet de cibler des lments qui sont le seul enfant de leur parent. Par exemple, si on
se rfre au code ci-dessus, seul le paragraphe qui est seul enfant de la div prendra la
couleur rouge.
Soit le balisage suivant.
<div><p> Mon paragraphe ici. </p></div>
<div>
<p> Deux paragraphes au total. </p>
<p> Deux paragraphes au total. </p>
</div>
14
Ici, les paragraphes de la seconde div ne seront pas cibls ; seul la premire div le sera.
Ds que vous affectez plus d'un enfant un lment, la pseudo-classe only-child cesse
d'tre prise en compte.
Compatibilit
29) X:only-of-type
1 li:only-of-type {
3 }
Cette pseudo-classe structurelle peut tre utilise astucieusement de plusieurs manires.
Elle cible les lments qui n'ont aucun frre au sein du conteneur parent. Prenons un
exemple en ciblant tous les ul s qui n'ont qu'un seul lment de liste.
Tout d'abord, demandez-vous comment vous atteindriez cet objectif. Vous pourriez recourir
ul li mais a ciblerait tous les lments de liste. La seule solution consiste utiliser only-
of-type .
1 ul > li:only-of-type {
3 }
Compatibilit
30) X:first-of-type
La pseudo-classe first-of-type vous permet de slectionner les premiers frres d'un type
donn.
Un test
Pour mieux comprendre, faisons un test. Copiez le balisage suivant dans votre diteur de
code :
01 <div>
02 <p> Mon paragraphe ici. </p>
03 <ul>
04 <li> Elment de liste 1 </li>
06 </ul>
07
08 <ul>
15
11 </ul>
12 </div>
Maintenant, sans lire la suite, essayez de trouver comment cibler "Elment de liste 2".
Quand vous avez trouv (... ou renonc), reprenez la lecture.
Solution 1
Il y a plusieurs manires de rsoudre ce test. Nous allons en voir quelques-uns. Commenons
en utilisant first-of-type .
1 ul:first-of-type > li:nth-child(2) {
3 }
Ce bout de code ne fait que dire : "trouve la premire liste non ordonne sur la page, puis
trouve seulement les enfants immdiats qui sont des lments de liste. Ensuite, filtre le
rsultat pour obtenir seulement le deuxime lment de liste de cet ensemble".
Solution 2
Une autre solution consiste utiliser le slecteur adjacent.
1 p + ul li:last-child {
3 }
Dans ce scnario, nous trouvons le ul qui prcde immdiatement la balise p puis nous
trouvons le tout dernier enfant de l'lment.
Solution 3
Nous pouvons tre aussi pervers ou joueurs que nous le souhaitons avec ces slecteurs !
1 ul:first-of-type li:nth-last-child(1) {
3 }
Cette fois-ci, nous attrapons le premier ul sur la page puis nous trouvons le tout premier
lment de liste... mais en commenant par la fin ! :)
Compatibilit
31) IE9+ ; Firefox 3.5+ ; Chrome ; Safari ; Opera
Conclusion
Si vous prenez encore en compte de vieux navigateurs comme Internet Explorer 6, il faudra
tre prudent quand vous dciderez d'utiliser ces slecteurs beaucoup plus rcents. Mais que
cela ne vous empche pas de les apprendre ; au contraire, les ignorer ne peut que vous
desservir. Assurez-vous galement deconsulter ce lien pour une liste des compatibilits
navigateurs. Alternativement, vous pouvez utiliser l'excellent script de Dean Edward,
IE9.js pour une prise en charge de ces slecteurs par les navigateurs les plus anciens.
16
Ensuite, si vous travaillez avec des bibliothques JavaScript, comme le fameux jQuery,
essayez toujours d'utiliser, si c'est possible, ces slecteurs CSS3 natifs plutt que les
slecteurs et/ou mthodes maison fournis par cette bibliothque. Cela rendravotre code
plus rapide car le moteur de slecteur pourra alors utiliser le parsing natif du navigateur
plutt que le sien propre.
Merci de m'avoir lu. J'espre que vous avez glan une ou deux astuces !
17
Selector Example Example description
:active a:active Selects the active link
:checked input:checked Selects every checked <input> element
:disabled input:disabled Selects every disabled <input> element
:empty p:empty Selects every <p> element that has no children
:enabled input:enabled Selects every enabled <input> element
:first-child p:first-child Selects every <p> elements that is the first child of its parent
Selects every <p> element that is the first <p> element of its
:first-of-type p:first-of-type
parent
:focus input:focus Selects the <input> element that has focus
:hover a:hover Selects links on mouse over
Selects <input> elements with a value within a specified
:in-range input:in-range
range
:invalid input:invalid Selects all <input> elements with an invalid value
Selects every <p> element with a lang attribute value starting
:lang(language) p:lang(it)
with "it"
:last-child p:last-child Selects every <p> elements that is the last child of its parent
Selects every <p> element that is the last <p> element of its
:last-of-type p:last-of-type
parent
:link a:link Selects all unvisited links
:not(selector) :not(p) Selects every element that is not a <p> element
Selects every <p> element that is the second child of its
:nth-child(n) p:nth-child(2)
parent
p:nth-last- Selects every <p> element that is the second child of its
:nth-last-child(n)
child(2) parent, counting from the last child
p:nth-last-of- Selects every <p> element that is the second <p> element of
:nth-last-of-type(n)
type(2) its parent, counting from the last child
Selects every <p> element that is the second <p> element of
:nth-of-type(n) p:nth-of-type(2)
its parent
Selects every <p> element that is the only <p> element of its
:only-of-type p:only-of-type
parent
:only-child p:only-child Selects every <p> element that is the only child of its parent
:optional input:optional Selects <input> elements with no "required" attribute
input:out-of- Selects <input> elements with a value outside a specified
:out-of-range
range range
Selects <input> elements with a "readonly" attribute
:read-only input:read-only
specified
input:read-
:read-write Selects <input> elements with no "readonly" attribute
write
Selects <input> elements with a "required" attribute
:required input:required
specified
:root root Selects the document's root element
Selects the current active #news element (clicked on a URL
:target #news:target
containing that anchor name)
:valid input:valid Selects all <input> elements with a valid value
:visited a:visited Selects all visited links
18
::after p::after Insert content after every <p> element
::before p::before Insert content before every <p> element
::first-letter p::first-letter Selects the first letter of every <p> element
::first-line p::first-line Selects the first line of every <p> element
::selection p::selection Selects the portion of an element that is selected by a user
::after p::after Insert content after every <p> element
19
Nouveaux lments en HTML5
Vous trouverez ci-dessous une liste des nouveaux lments HTML5 et une
description de ce qu'ils utilisent.
Nouveaux lments smantiques / structurels

HTML5 offre de nouveaux lments pour une meilleure structure de
document :
Tag Description
<article> Defines an article in a document
<aside> Defines content aside from the page content
<bdi> Isolates a part of text that might be formatted in a different direction
from other text outside it
<details> Defines additional details that the user can view or hide
<dialog> Defines a dialog box or window
<figcaption> Defines a caption for a <figure> element
<figure> Defines self-contained content
<footer> Defines a footer for a document or section
<header> Defines a header for a document or section
<main> Defines the main content of a document
<mark> Defines marked/highlighted text
<menuitem> Defines a command/menu item that the user can invoke from a popup
menu
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links
<progress> Represents the progress of a task
<rp> Defines what to show in browsers that do not support ruby
annotations
<rt> Defines an explanation/pronunciation of characters (for East Asian
typography)
<ruby> Defines a ruby annotation (for East Asian typography)
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time
<wbr> Defines a possible line-break
Nouveaux lments du formulaire

Tag Description
<datalist> Specifies a list of pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation
Nouveaux types d'entre (input)

20
New Input Types New Input Attributes
color autocomplete
date autofocus
datetime form
datetime-local formaction
email formenctype
month formmethod
number formnovalidate
range formtarget
search height and width
tel list
time min and max
url multiple
week pattern (regexp)
placeholder
required
step
HTML5 - Nouvelle syntaxe d'attribut

HTML5 permet quatre syntaxes diffrentes pour les attributs.
Type Example
Empty <input type="text" value="John" disabled>
Unquoted <input type="text" value=John>
Double-quoted <input type="text" value="John Doe">
Single-quoted <input type="text" value='John Doe'>
Nouveaux lments mdiatiques

Tag Description
<audio> Defines sound content
<embed> Defines a container for an external (non-HTML) application
<source> Defines multiple media resources for media elements
(<video> and <audio>)
<track> Defines text tracks for media elements (<video> and
<audio>)
<video> Defines video or movie
21

Les 30 Sélecteurs CSS À Absolument Connaître

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Les 30 Sélecteurs CSS À Absolument Connaître

Hochgeladen von

Copyright:

Verfügbare Formate

Vous connaissez les slecteurs de base - id , class et descendant - et vous vous dites que

slecteur adjacent ( ul + p ) ne cible que le premier lment immdiatement prcd du

prendrait pas en compte les urls commenant par https:// .

videmment pas pour les gifs ni les pngs .

child(397) , vous pouvez utiliser la pseudo-classe nth-last-child .

raccrocher, vous pourriez alors recourir la pseudo-classe nth-of-type(n) . Dans le bout de

un border-top lgrement plus clair.

Nouveaux lments smantiques / structurels

Nouveaux lments du formulaire

Nouveaux types d'entre (input)

HTML5 - Nouvelle syntaxe d'attribut

Nouveaux lments mdiatiques

Das könnte Ihnen auch gefallen