Cours gratuits » Cours informatique » Cours développement web » Cours CSS » Cours CSS3 : Les sélecteurs
Cours CSS| CSS : cascades et sélecteurs |
au programme
1 Cascade
2 Sélecteurs
3 Priorités
au programme
1 Cascade
2 Sélecteurs
3 Priorités
un même document peut utiliser plusieurs feuilles de style il peut y avoir des règles en conflit
un même document peut utiliser plusieurs feuilles de style il peut y avoir des règles en conflit
1 les sélecteurs sélectionnent des éléments communs
2 portent sur la même propriété
3 attribuent des valeurs différentes
4
un même document peut utiliser plusieurs feuilles de style il peut y avoir des règles en conflit
1 les sélecteurs sélectionnent des éléments communs
2 portent sur la même propriété
3 attribuent des valeurs différentes
Comment résoudre ces conflits ?
Quelle règle est appliquée ?
4
| Cascade |
| Le mécanisme de cascade détermine les règles appliquées. |
5
| Cascade |
| Le mécanisme de cascade détermine les règles appliquées. |
3 étapes de filtre :
1 par média
2 par origine
3 par spécificité des sélecteurs
possibilité de préciser le media dans auquel s’applique les règles définies dans la feuille style attribut media de la balise <link>
ex : media="screen" – media="print"
3 origines possibles pour les feuilles de style auteur définies par l’auteur de la page
utilisateur définies par celui qui consulte la page
navigateur définies par le navigateur en général : auteur > utilisateur > navigateur
nuancé par usage du mot-clé !important
plus de détails :
au programme
1 Cascade
2 Sélecteurs
3 Priorités
4 Pseudo-
au programme
1 Cascade
2 Sélecteurs
3 Priorités
4 Pseudo-
| Sélecteur |
| Le sélecteur détermine les éléments sur lesquels s’applique la règle. |
nécessité de savoir comment définir les sélecteurs appropriés sont gérées les priorités entre règles en conflit
| Sélecteur |
| Le sélecteur détermine les éléments sur lesquels s’applique la règle. |
nécessité de savoir comment définir les sélecteurs appropriés
sont gérées les priorités entre règles en conflit
Sélecteurs simples :
E tout élément dont la balise est <E>
* tout élément
10
E[att] tout élément E dont l’attribut att est défini ex : p[lang], img[alt], *[title]
E[att] tout élément E dont l’attribut att est défini ex : p[lang], img[alt], *[title]
E[att=val] tout élément E dont l’attribut att vaut valex : p[lang=fr]
E[att] tout élément E dont l’attribut att est défini ex : p[lang], img[alt], *[title]
E[att=val] tout élément E dont l’attribut att vaut valex : p[lang=fr]
E[att∼=val] tout élément E dont l’attribut att est une liste de mots séparés par des espaces, l’un de ces mots vaut exactement val
E[attˆ=”prefixe”] tout élément E dont la valeur de l’attribut att commence exactement par prefixeex : a[hrefˆ=""]
E[attˆ=”prefixe”] tout élément E dont la valeur de l’attribut att commence exactement par prefixeex : a[hrefˆ=""]
E[att$=”suffixe”] tout élément E dont la valeur de l’attribut att se termine exactement par suffixeex : img[src$=".png"], a[href$=".pdf"]
E[attˆ=”prefixe”] tout élément E dont la valeur de l’attribut att commence exactement par prefixeex : a[hrefˆ=""]
E[att$=”suffixe”] tout élément E dont la valeur de l’attribut att se termine exactement par suffixeex : img[src$=".png"], a[href$=".pdf"]
E[att*=”val”] tout élément E dont la valeur de l’attribut att contient la sous-chaˆıne val
ex : figure[alt*="diagramme"], *[title*="timo"]
Cas particuliers des attributs class et id :
E.c tout élément E appartenant à la classe c équivalent à E[class∼=c]
ex : div.exercice, *.solution, [titleˆ="NB"]
13
Cas particuliers des attributs class et id :
E.c tout élément E appartenant à la classe c équivalent à E[class∼=c]
ex : div.exercice, *.solution, [titleˆ="NB"]
E#ident tout élément E dont l’id vaut ident
équivalent à E[id=ident]ex : img#joconde, *#joconde, #unique
13
E:pseudoC tout élément E appartenant à la pseudo-classepseudoC
ex : a:visited, a.fichier:hover
pseudo-classes et pseudo-éléments présentés plus loin
14
E:pseudoC tout élément E appartenant à la pseudo-classepseudoC
ex : a:visited, a.fichier:hover
E::pseudoE tout pseudo-élémentpseudoE de l’élément E
ex : h1::first-letter, p[lang=fr]::first-line
pseudo-classes et pseudo-éléments présentés plus loin
14
s’appuie sur la structure arborescente du document
si Sel1 et Sel2 sont des sélecteurs :
Sel1 Sel2 tout élément sélectionné par Sel2descendant (emboité dans) d’un élément sélectionné par Sel1
s’appuie sur la structure arborescente du document
si Sel1 et Sel2 sont des sélecteurs :
Sel1 Sel2 tout élément sélectionné par Sel2descendant (emboité dans) d’un élément sélectionné par Sel1
Sel1>Sel2 tout élément sélectionné par Sel2 qui est fils d’un élément sélectionné par Sel1
s’appuie sur la structure arborescente du document
si Sel1 et Sel2 sont des sélecteurs :
Sel1 Sel2 tout élément sélectionné par Sel2descendant (emboité dans) d’un élément sélectionné par Sel1
Sel1>Sel2 tout élément sélectionné par Sel2 qui est fils d’un
élément sélectionné par Sel1
Sel1 + Sel2 tout élément sélectionné par Sel2 qui suit immédiatement un élément sélectionné par Sel1 (premier frère suivant)
s’appuie sur la structure arborescente du document
si Sel1 et Sel2 sont des sélecteurs :
Sel1 Sel2 tout élément sélectionné par Sel2descendant (emboité dans) d’un élément sélectionné par Sel1
Sel1>Sel2 tout élément sélectionné par Sel2 qui est fils d’un
élément sélectionné par Sel1
Sel1 + Sel2 tout élément sélectionné par Sel2 qui suit immédiatement un élément sélectionné par Sel1
(premier frère suivant)
Sel1∼Sel2 tout élément sélectionné par Sel2 qui suit un élément sélectionné par Sel1 (un frère suivant)
au programme
1 Cascade
2 Sélecteurs
3 Priorités
18
au programme
1 Cascade
2 Sélecteurs
3 Priorités
4 Pseudo-
19
| Calcul de priorité |
| On compte pour chaque sélecteur : a nombre de sélecteurs d’id (= nombre de #) b nombre de classes, pseudo-classes ou d’attributs c nombre d’éléments ou de pseudo-éléments Le sélecteur rec¸oit la priorité a b c. Le sélecteur avec la plus grande priorité l’emporte. En cas d’égalité, la dernière déclaration l’emporte. |
20
| sélecteur | a | b | c |
| * { } h1 { } div.reponse { } #joconde { } div a { } div a:visited { } p span.fichier { } p a[href$=”.pdf”] { } p.enonce a[href$=”.pdf”] { } ol.exercice li.question { } div#diaporama img.gauche { } { } |
| sélecteur | a | b | c |
| * { } h1 { } div.reponse { } #joconde { } div a { } div a:visited { } p span.fichier { } p a[href$=”.pdf”] { } p.enonce a[href$=”.pdf”] { } ol.exercice li.question { } div#diaporama img.gauche { } { } | 0 | 0 | 0 |
| sélecteur | a | b | c |
| * { } | 0 | 0 | 0 |
| h1 { } div.reponse { } #joconde { } div a { } div a:visited { } p span.fichier { } p a[href$=”.pdf”] { } p.enonce a[href$=”.pdf”] { } ol.exercice li.question { } div#diaporama img.gauche { } { } | 0 | 0 | 1 |
| sélecteur | a | b | c |
| * { } | 0 | 0 | 0 |
| h1 { } | 0 | 0 | 1 |
| div.reponse { } #joconde { } div a { } div a:visited { } p span.fichier { } p a[href$=”.pdf”] { } p.enonce a[href$=”.pdf”] { } ol.exercice li.question { } div#diaporama img.gauche { } { } | 0 | 1 | 1 |
| sélecteur | a | b | c |
| * { } | 0 | 0 | 0 |
| h1 { } | 0 | 0 | 1 |
| div.reponse { } | 0 | 1 | 1 |
| #joconde { } div a { } div a:visited { } p span.fichier { } p a[href$=”.pdf”] { } p.enonce a[href$=”.pdf”] { } ol.exercice li.question { } div#diaporama img.gauche { } { } | 1 | 0 | 0 |
| sélecteur | a | b | c |
| * { } | 0 | 0 | 0 |
| h1 { } | 0 | 0 | 1 |
| div.reponse { } | 0 | 1 | 1 |
| #joconde { } | 1 | 0 | 0 |
| div a { } div a:visited { } p span.fichier { } p a[href$=”.pdf”] { } p.enonce a[href$=”.pdf”] { } ol.exercice li.question { } div#diaporama img.gauche { } { } | 0 | 0 | 2 |
| sélecteur | a | b | c |
| * { } | 0 | 0 | 0 |
| h1 { } | 0 | 0 | 1 |
| div.reponse { } | 0 | 1 | 1 |
| #joconde { } | 1 | 0 | 0 |
| div a { } | 0 | 0 | 2 |
| div a:visited { } p span.fichier { } p a[href$=”.pdf”] { } p.enonce a[href$=”.pdf”] { } ol.exercice li.question { } div#diaporama img.gauche { } { } | 0 | 1 | 2 |
| sélecteur | a | b | c |
| * { } | 0 | 0 | 0 |
| h1 { } | 0 | 0 | 1 |
| div.reponse { } | 0 | 1 | 1 |
| #joconde { } | 1 | 0 | 0 |
| div a { } | 0 | 0 | 2 |
| div a:visited { } | 0 | 1 | 2 |
| p span.fichier { } p a[href$=”.pdf”] { } p.enonce a[href$=”.pdf”] { } ol.exercice li.question { } div#diaporama img.gauche { } { } | 0 | 1 | 2 |
| sélecteur | a | b | c |
| * { } | 0 | 0 | 0 |
| h1 { } | 0 | 0 | 1 |
| div.reponse { } | 0 | 1 | 1 |
| #joconde { } | 1 | 0 | 0 |
| div a { } | 0 | 0 | 2 |
| div a:visited { } | 0 | 1 | 2 |
| p span.fichier { } | 0 | 1 | 2 |
| p a[href$=”.pdf”] { } p.enonce a[href$=”.pdf”] { } ol.exercice li.question { } div#diaporama img.gauche { } { } | 0 | 1 | 2 |
| sélecteur | a | b | c |
| * { } | 0 | 0 | 0 |
| h1 { } | 0 | 0 | 1 |
| div.reponse { } | 0 | 1 | 1 |
| #joconde { } | 1 | 0 | 0 |
| div a { } | 0 | 0 | 2 |
| div a:visited { } | 0 | 1 | 2 |
| p span.fichier { } | 0 | 1 | 2 |
| p a[href$=”.pdf”] { } | 0 | 1 | 2 |
| p.enonce a[href$=”.pdf”] { } ol.exercice li.question { } div#diaporama img.gauche { } { } | 0 | 2 | 2 |
| sélecteur | a | b | c |
| * { } | 0 | 0 | 0 |
| h1 { } | 0 | 0 | 1 |
| div.reponse { } | 0 | 1 | 1 |
| #joconde { } | 1 | 0 | 0 |
| div a { } | 0 | 0 | 2 |
| div a:visited { } | 0 | 1 | 2 |
| p span.fichier { } | 0 | 1 | 2 |
| p a[href$=”.pdf”] { } | 0 | 1 | 2 |
| p.enonce a[href$=”.pdf”] { } | 0 | 2 | 2 |
| ol.exercice li.question { } div#diaporama img.gauche { } { } | 0 | 2 | 2 |
| sélecteur | a | b | c |
| * { } | 0 | 0 | 0 |
| h1 { } | 0 | 0 | 1 |
| div.reponse { } | 0 | 1 | 1 |
| #joconde { } | 1 | 0 | 0 |
| div a { } | 0 | 0 | 2 |
| div a:visited { } | 0 | 1 | 2 |
| p span.fichier { } | 0 | 1 | 2 |
| p a[href$=”.pdf”] { } | 0 | 1 | 2 |
| p.enonce a[href$=”.pdf”] { } | 0 | 2 | 2 |
| ol.exercice li.question { } | 0 | 2 | 2 |
| div#diaporama img.gauche { } { } | 1 | 1 | 2 |
| sélecteur | a | b | c |
| * { } | 0 | 0 | 0 |
| h1 { } | 0 | 0 | 1 |
| div.reponse { } | 0 | 1 | 1 |
| #joconde { } | 1 | 0 | 0 |
| div a { } | 0 | 0 | 2 |
| div a:visited { } | 0 | 1 | 2 |
| p span.fichier { } | 0 | 1 | 2 |
| p a[href$=”.pdf”] { } | 0 | 1 | 2 |
| p.enonce a[href$=”.pdf”] { } | 0 | 2 | 2 |
| ol.exercice li.question { } | 0 | 2 | 2 |
| div#diaporama img.gauche { } | 1 | 1 | 2 |
| article p::first-letter { } article#special p::first-letter { } | 0 | 0 | 3 |
| sélecteur | a | b | c |
| * { } | 0 | 0 | 0 |
| h1 { } | 0 | 0 | 1 |
| div.reponse { } | 0 | 1 | 1 |
| #joconde { } | 1 | 0 | 0 |
| div a { } | 0 | 0 | 2 |
| div a:visited { } | 0 | 1 | 2 |
| p span.fichier { } | 0 | 1 | 2 |
| p a[href$=”.pdf”] { } | 0 | 1 | 2 |
| p.enonce a[href$=”.pdf”] { } | 0 | 2 | 2 |
| ol.exercice li.question { } | 0 | 2 | 2 |
| div#diaporama img.gauche { } | 1 | 1 | 2 |
| article p::first-letter { } | 0 | 0 | 3 |
| article#special p::first-letter { } | 1 | 0 | 3 |
| 1 |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
p { b-g :pink }
h1+p { b-g:red; }
<p>zero</p>div>p { b-g:yellow; }
<h1>Titre</h1>p#special { b-g:gold; }
<p>premier</p>p[lang=en] { b-g:green; } <p>second</p>p.bleu { b-g:lightblue; }
<p>troisie`me</p>p+p { b-g:lightgreen; }
<p lang="en">fourth </p>
<p class="bleu">cinquième</p>
<p class="bleu">sixième</p>
<p class="bleu" id="special">7ème</p>
<p>huitie`me</p>
<div>
<p>neuvie`me</p>
<p lang="en">tenth</p>
</div>
<p>onzie`me </p>
<h1>Second titre </h1>
<p>douzie`me</p>
| 1 |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
p { b-g :pink }
h1+p { b-g:red; }
<p>zero</p>div>p { b-g:yellow; }
<h1>Titre</h1>p#special { b-g:gold; }
<p>premier</p>p[lang=en] { b-g:green; } <p>second</p>p.bleu { b-g:lightblue; }
<p>troisie`me</p>p+p { b-g:lightgreen; }
<p lang="en">fourth </p>
<p class="bleu">cinquième</p>
<p class="bleu">sixième</p>
<p class="bleu" id="special">7ème</p>
<p>huitie`me</p>
<div>
<p>neuvie`me</p>
<p lang="en">tenth</p>
</div>
<p>onzie`me </p>
<h1>Second titre </h1>
<p>douzie`me</p>
| 1 |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
p { b-g :pink }
h1+p { b-g:red; }
<p>zero</p>div>p { b-g:yellow; }
<h1>Titre</h1>p#special { b-g:gold; }
<p>premier</p>p[lang=en] { b-g:green; } <p>second</p>p.bleu { b-g:lightblue; }
<p>troisie`me</p>p+p { b-g:lightgreen; }
<p lang="en">fourth </p>
<p class="bleu">cinquième</p>
<p class="bleu">sixième</p>
<p class="bleu" id="special">7ème</p>
<p>huitie`me</p>
<div>
<p>neuvie`me</p>
<p lang="en">tenth</p>
</div>
<p>onzie`me </p>
<h1>Second titre </h1>
<p>douzie`me</p>
p { b-g :pink }
h1+p { b-g:red; }
<p>zero</p> 1div>p { b-g:yellow; }
<h1>Titre</h1>p#special { b-g:gold; }
| 1 |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
<p>premier</p> 1p[lang=en] { b-g:green; } <p>second</p> 1p.bleu { b-g:lightblue; }
<p>troisie`me</p> 1p+p { b-g:lightgreen; }
<p lang="en">fourth </p> 1
| > | 1 |
| 1 |
<p class="bleu">cinquième</p
<p class="bleu">sixième</p>
<p class="bleu" id="special">7ème</p> 1
<p>huitie`me</p> 1
<div>
<p>neuvie`me</p> 1
<p lang="en">tenth</p> 1
</div>
<p>onzie`me 1 </p>
<h1>Second titre </h1>
<p>douzie`me</p> 1
p { b-g :pink }
h1+p { b-g:red; }
<p>zero</p> 1div>p { b-g:yellow; }
<h1>Titre</h1>p#special { b-g:gold; }
| 1 |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
<p>premier</p> 1 2p[lang=en] { b-g:green; } <p>second</p> 1p.bleu { b-g:lightblue; }
<p>troisie`me</p> 1p+p { b-g:lightgreen; }
<p lang="en">fourth </p> 1
| > | 1 |
| 1 |
<p class="bleu">cinquième</p
<p class="bleu">sixième</p>
<p class="bleu" id="special">7ème</p> 1
<p>huitie`me</p> 1
<div>
<p>neuvie`me</p> 1
<p lang="en">tenth</p> 1
</div>
<p>onzie`me 1 </p>
<h1>Second titre </h1>
<p>douzie`me</p> 12
p { b-g :pink }
h1+p { b-g:red; }
<p>zero</p> 1div>p { b-g:yellow; }
<h1>Titre</h1>p#special { b-g:gold; }
| 1 |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
<p>premier</p> 1 2p[lang=en] { b-g:green; } <p>second</p> 1p.bleu { b-g:lightblue; }
<p>troisie`me</p> 1p+p { b-g:lightgreen; }
<p lang="en">fourth </p> 1
| > | 1 |
| 1 |
<p class="bleu">cinquième</p
<p class="bleu">sixième</p>
<p class="bleu" id="special">7ème</p> 1
<p>huitie`me</p> 1
<div>
<p>neuvie`me</p> 13
<p lang="en">tenth</p> 13
</div>
<p>onzie`me 1 </p>
<h1>Second titre </h1>
<p>douzie`me</p> 12
p { b-g :pink }
h1+p { b-g:red; }
<p>zero</p> 1div>p { b-g:yellow; }
<h1>Titre</h1>p#special { b-g:gold; }
| 1 |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
<p>premier</p> 1 2p[lang=en] { b-g:green; } <p>second</p> 1p.bleu { b-g:lightblue; }
<p>troisie`me</p> 1p+p { b-g:lightgreen; }
<p lang="en">fourth </p> 1
| > | 1 |
| 1 |
<p class="bleu">cinquième</p
<p class="bleu">sixième</p>
<p class="bleu" id="special">7ème</p> 14
<p>huitie`me</p> 1
<div>
<p>neuvie`me</p> 13
<p lang="en">tenth</p> 13
</div>
<p>onzie`me 1 </p>
<h1>Second titre </h1>
<p>douzie`me</p> 12
p { b-g :pink }
h1+p { b-g:red; }
<p>zero</p> 1div>p { b-g:yellow; }
<h1>Titre</h1>p#special { b-g:gold; }
| 1 |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
<p>premier</p> 1 2p[lang=en] { b-g:green; } <p>second</p> 1p.bleu { b-g:lightblue; }
<p>troisie`me</p> 1p+p { b-g:lightgreen; }
| > | 1 |
| 1 |
<p lang="en">fourth </p> 15 <p class="bleu">cinquième</p
<p class="bleu">sixième</p>
<p class="bleu" id="special">7ème</p> 14
<p>huitie`me</p> 1
<div>
<p>neuvie`me</p> 13
<p lang="en">tenth</p> 135
</div>
<p>onzie`me 1 </p>
<h1>Second titre </h1>
<p>douzie`me</p> 12
p { b-g :pink }
h1+p { b-g:red; }
<p>zero</p> 1div>p { b-g:yellow; }
<h1>Titre</h1>p#special { b-g:gold; }
| 1 |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
<p>premier</p> 1 2p[lang=en] { b-g:green; } <p>second</p> 1p.bleu { b-g:lightblue; }
<p>troisie`me</p> 1p+p { b-g:lightgreen; }
| > | 1 | 6 |
| 1 | 6 |
<p lang="en">fourth </p> 15 <p class="bleu">cinquième</p
<p class="bleu">sixième</p>
<p class="bleu" id="special">7ème</p> 146
<p>huitie`me</p> 1
<div>
<p>neuvie`me</p> 13
<p lang="en">tenth</p> 135
</div>
<p>onzie`me 1 </p>
<h1>Second titre </h1>
<p>douzie`me</p> 12
|
| ||||||||||||||||||
p { b-g :pink }
h1+p { b-g:red; }
<p>zero</p> 1div>p { b-g:yellow; }
<h1>Titre</h1>p#special { b-g:gold; }
<p>premier</p> 1 2p[lang=en] { b-g:green; } <p>second</p> 1 7p.bleu { b-g:lightblue; }
<p>troisie`me</p> 1 7p+p { b-g:lightgreen; }
<p lang="en">fourth </p> 1
<p class="bleu">cinquième</p
<p class="bleu">sixième</p>
<p class="bleu" id="special">7ème</p> 1467
<p>huitie`me</p> 17
<div>
<p>neuvie`me</p> 13
<p lang="en">tenth</p> 1357
</div>
<p>onzie`me 1 </p>
<h1>Second titre </h1>
<p>douzie`me</p> 12
| 1 |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
| 5 > | 7 | ||
| 1 | 6 | 7 | |
| 1 | 6 | 7 | |
p { b-g :pink }
h1+p { b-g:red; }
<p>zero</p> 1div>p { b-g:yellow; }
<h1>Titre</h1>p#special { b-g:gold; }
<p>premier</p> 1 2p[lang=en] { b-g:green; } <p>second</p> 1 7p.bleu { b-g:lightblue; }
<p>troisie`me</p> 1 7p+p { b-g:lightgreen; }
<p lang="en">fourth </p> 1
<p class="bleu">cinquième</p
<p class="bleu">sixième</p>
<p class="bleu" id="special">7ème</p> 1467
<p>huitie`me</p> 17
<div>
<p>neuvie`me</p> 13
<p lang="en">tenth</p> 1357
</div>
<p>onzie`me 1 </p>
<h1>Second titre </h1>
<p>douzie`me</p> 12
| 1 |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
| 5 > | 7 | ||
| 1 | 6 | 7 | |
| 1 | 6 | 7 | |
p { b-g :pink }
h1+p { b-g:red; }
<p>zero</p> 1div>p { b-g:yellow; }
<h1>Titre</h1>p#special { b-g:gold; }
<p>premier</p> 1 2p[lang=en] { b-g:green; } <p>second</p> 1 7p.bleu { b-g:lightblue; }
<p>troisie`me</p> 1 7p+p { b-g:lightgreen; }
<p lang="en">fourth </p> 1
<p class="bleu">cinquième</p
<p class="bleu">sixième</p>
<p class="bleu" id="special">7ème</p> 1467
<p>huitie`me</p> 17
<div>
<p>neuvie`me</p> 13
<p lang="en">tenth</p> 1357
</div>
<p>onzie`me 1 </p>
| <h1>Second titre </h1> | |
| <p>douzie`me</p> 12 | 4>6>5>7>3>2>1 |
| 1 |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
| 5 > | 7 | ||
| 1 | 6 | 7 | |
| 1 | 6 | 7 | |
p { b-g :pink }
h1+p { b-g:red; }
<p>zero</p> 1div>p { b-g:yellow; }
<h1>Titre</h1>p#special { b-g:gold; }
<p>premier</p>p[lang=en] { b-g:green; } <p>second</p> 17p.bleu { b-g:lightblue; }
<p>troisie`me</p> 1 7p+p { b-g:lightgreen; }
<p lang="en">fourth </p> 1
<p class="bleu">cinquième</p
<p class="bleu">sixième</p>
<p class="bleu" id="special">7ème</p> 1467
<p>huitie`me</p> 17
<div>
<p>neuvie`me</p> 13
<p lang="en">tenth</p> 1357
</div>
<p>onzie`me 1 </p>
| <h1>Second titre </h1> | |
| <p>douzie`me</p> 12 | 4>6>5>7>3>2>1 |
| 1 |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
| 5 > | 7 | ||
| 1 | 6 | 7 | |
| 1 | 6 | 7 | |
p { b-g :pink }
h1+p { b-g:red; }
<p>zero</p> 1div>p { b-g:yellow; }
<h1>Titre</h1>p#special { b-g:gold; }
<p>premier</p>p[lang=en] { b-g:green; } <p>second</p>p.bleu { b-g:lightblue; }
<p>troisie`me</p> 1 7p+p { b-g:lightgreen; }
<p lang="en">fourth </p> 1
<p class="bleu">cinquième</p
<p class="bleu">sixième</p>
<p class="bleu" id="special">7ème</p> 1467
<p>huitie`me</p> 17
<div>
<p>neuvie`me</p> 13
<p lang="en">tenth</p> 1357
</div>
<p>onzie`me 1 </p>
| <h1>Second titre </h1> | |
| <p>douzie`me</p> 12 | 4>6>5>7>3>2>1 |
| 1 |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
| 5 > | 7 | ||
| 1 | 6 | 7 | |
| 1 | 6 | 7 | |
p { b-g :pink }
h1+p { b-g:red; }
<p>zero</p> 1div>p { b-g:yellow; }
<h1>Titre</h1>p#special { b-g:gold; }
<p>premier</p>p[lang=en] { b-g:green; } <p>second</p>p.bleu { b-g:lightblue; }
<p>troisie`me</p> 7p+p { b-g:lightgreen; }
<p lang="en">fourth </p> 1
<p class="bleu">cinquième</p
<p class="bleu">sixième</p>
<p class="bleu" id="special">7ème</p> 1467
<p>huitie`me</p> 17
<div>
<p>neuvie`me</p> 13
<p lang="en">tenth</p> 1357
</div>
<p>onzie`me 1 </p>
| <h1>Second titre </h1> | |
| <p>douzie`me</p> 12 | 4>6>5>7>3>2>1 |
p { b-g :pink }
h1+p { b-g:red; }
<p>zero</p> 1div>p { b-g:yellow; }
<h1>Titre</h1>p#special { b-g:gold; }
<p>premier</p>p[lang=en] { b-g:green; } <p>second</p>p.bleu { b-g:lightblue; }
| 1 |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
<p>troisie`me</p> 7p+p { b-g:lightgreen; }
<p lang="en">fourth </p> 5
<p class="bleu">cinquième</p
<p class="bleu">sixième</p>
| > | 1 | 6 | 7 |
| 1 | 6 | 7 |
<p class="bleu" id="special">7ème</p> 1467
<p>huitie`me</p> 17
<div>
<p>neuvie`me</p> 13
<p lang="en">tenth</p> 1357
</div>
<p>onzie`me 1 </p>
| <h1>Second titre </h1> | |
| <p>douzie`me</p> 12 | 4>6>5>7>3>2>1 |
p { b-g :pink }
h1+p { b-g:red; }
<p>zero</p> 1div>p { b-g:yellow; }
<h1>Titre</h1>p#special { b-g:gold; }
<p>premier</p>p[lang=en] { b-g:green; } <p>second</p>p.bleu { b-g:lightblue; }
| 1 |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
<p>troisie`me</p> 7p+p { b-g:lightgreen; }
<p lang="en">fourth </p> 5
<p class="bleu">cinquième</p>
<p class="bleu">sixième</p> 1
| 6 | |
| 6 | 7 |
<p class="bleu" id="special">7ème</p> 1467
<p>huitie`me</p> 17
<div>
<p>neuvie`me</p> 13
<p lang="en">tenth</p> 1357
</div>
<p>onzie`me 1 </p>
| <h1>Second titre </h1> | |
| <p>douzie`me</p> 12 | 4>6>5>7>3>2>1 |
p { b-g :pink }
h1+p { b-g:red; }
<p>zero</p> 1div>p { b-g:yellow; }
<h1>Titre</h1>p#special { b-g:gold; }
<p>premier</p>p[lang=en] { b-g:green; } <p>second</p>p.bleu { b-g:lightblue; }
| 1 |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
<p>troisie`me</p> 7p+p { b-g:lightgreen; }
<p lang="en">fourth </p> 5
<p class="bleu">cinquième</p>
<p class="bleu">sixième</p>
| 6 | |
| 6 |
<p class="bleu" id="special">7ème</p> 1467
<p>huitie`me</p> 17
<div>
<p>neuvie`me</p> 13
<p lang="en">tenth</p> 1357
</div>
<p>onzie`me 1 </p>
| <h1>Second titre </h1> | |
| <p>douzie`me</p> 12 | 4>6>5>7>3>2>1 |
p { b-g :pink }
h1+p { b-g:red; }
<p>zero</p> 1div>p { b-g:yellow; }
<h1>Titre</h1>p#special { b-g:gold; }
<p>premier</p>p[lang=en] { b-g:green; } <p>second</p>p.bleu { b-g:lightblue; }
| 1 |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
<p>troisie`me</p> 7p+p { b-g:lightgreen; }
<p lang="en">fourth </p> 5
<p class="bleu">cinquième</p>
<p class="bleu">sixième</p>
| 6 | |
| 6 |
<p class="bleu" id="special">7ème</p> 4
<p>huitie`me</p> 17
<div>
<p>neuvie`me</p> 13
<p lang="en">tenth</p> 1357
</div>
<p>onzie`me 1 </p>
| <h1>Second titre </h1> | |
| <p>douzie`me</p> 12 | 4>6>5>7>3>2>1 |
p { b-g :pink }
h1+p { b-g:red; }
<p>zero</p> 1div>p { b-g:yellow; }
<h1>Titre</h1>p#special { b-g:gold; }
<p>premier</p>p[lang=en] { b-g:green; } <p>second</p>p.bleu { b-g:lightblue; }
| 1 |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
<p>troisie`me</p> 7p+p { b-g:lightgreen; }
<p lang="en">fourth </p> 5
<p class="bleu">cinquième</p>
<p class="bleu">sixième</p>
| 6 | |
| 6 |
<p class="bleu" id="special">7ème</p> 4
<p>huitie`me</p> 7
<div>
<p>neuvie`me</p> 13
<p lang="en">tenth</p> 1357
</div>
<p>onzie`me 1 </p>
| <h1>Second titre </h1> | |
| <p>douzie`me</p> 12 | 4>6>5>7>3>2>1 |
p { b-g :pink }
h1+p { b-g:red; }
<p>zero</p> 1div>p { b-g:yellow; }
<h1>Titre</h1>p#special { b-g:gold; }
<p>premier</p>p[lang=en] { b-g:green; } <p>second</p>p.bleu { b-g:lightblue; }
| 1 |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
<p>troisie`me</p> 7p+p { b-g:lightgreen; }
<p lang="en">fourth </p> 5
<p class="bleu">cinquième</p>
<p class="bleu">sixième</p>
| 6 | |
| 6 |
<p class="bleu" id="special">7ème</p> 4
<p>huitie`me</p> 7
<div>
<p>neuvie`me</p> 3
<p lang="en">tenth</p> 1357
</div>
<p>onzie`me 1 </p>
| <h1>Second titre </h1> | |
| <p>douzie`me</p> 12 | 4>6>5>7>3>2>1 |
p { b-g :pink }
h1+p { b-g:red; }
<p>zero</p> 1div>p { b-g:yellow; }
<h1>Titre</h1>p#special { b-g:gold; }
<p>premier</p>p[lang=en] { b-g:green; } <p>second</p>p.bleu { b-g:lightblue; }
| 1 |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
<p>troisie`me</p> 7p+p { b-g:lightgreen; }
<p lang="en">fourth </p> 5
<p class="bleu">cinquième</p>
<p class="bleu">sixième</p>
| 6 | |
| 6 |
<p class="bleu" id="special">7ème</p> 4
<p>huitie`me</p> 7
<div>
<p>neuvie`me</p> 3
<p lang="en">tenth</p> 5
</div>
<p>onzie`me 1 </p>
| <h1>Second titre </h1> | |
| <p>douzie`me</p> 12 | 4>6>5>7>3>2>1 |
p { b-g :pink }
h1+p { b-g:red; }
<p>zero</p> 1div>p { b-g:yellow; }
<h1>Titre</h1>p#special { b-g:gold; }
<p>premier</p>p[lang=en] { b-g:green; } <p>second</p>p.bleu { b-g:lightblue; }
| 1 |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
<p>troisie`me</p> 7p+p { b-g:lightgreen; }
<p lang="en">fourth </p> 5
<p class="bleu">cinquième</p>
<p class="bleu">sixième</p>
| 6 | |
| 6 |
<p class="bleu" id="special">7ème</p> 4
<p>huitie`me</p> 7
<div>
<p>neuvie`me</p> 3
<p lang="en">tenth</p> 5
</div>
<p>onzie`me 1 </p>
| <h1>Second titre </h1> | |
| <p>douzie`me</p> 2 | 4>6>5>7>3>2>1 |
| Héritage |
| lorsque pour un élément aucune règle ne définit de valeur pour une propriété, c’est la valeur de cette propriété pour son parent qui s’applique |
toutes les propriétés ne s’héritent pas ex : margin, padding, etc
la propriété inherit permet d’agir sur l’héritage
23
au programme
1 Cascade
2 Sélecteurs
3 Priorités
24
au programme
1 Cascade
2 Sélecteurs
4Pseudo-
25
non exhaustif
| Structurelles |
| :empty un élement E sans descendant (y compris nœud texte) :first-child un élément qui est premier fils d’un autre élément ex : div.exercice:first-child :last-child élément dernier fils d’un autre élément :nth-child(an+b) élément (an+b)-ème fils d’un autre élément ex : div:nth-child(3), div:nth-child(2n), div:nth-child(even), div[idx]:nth-child(3n+1) :nth-last-child(an+b) (an+b)-ème fils en partant de la fin :nth-of-type(an+b) (an+b)nème élément du type sélectionné et qui ont le même père |
26
non exhaustif
| Dynamiques |
| :hover est « sous » le pointeur de la souris :visited (<a> uniquement) lien déjà visité :link (<a> uniquement) lien non encore visité |
| Pseudo-éléments |
| ::first-line la première ligne « formatée » d’un élément ::first-letter le première lettre « formatée » d’un élément ::before insertion de contenu avant l’élément ::after insertion de contenu après l’élément |
27
29
