Cours CSS3 : Les sélecteurs

 

CSS : cascades et sélecteurs

au programme

1   Cascade

2   Sélecteurs

3   Priorités

4 Pseudo-

au programme

1   Cascade

2   Sélecteurs

3   Priorités

4 Pseudo-

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

Cascade

Le mécanisme de cascade détermine les règles appliquées.

5

cascade

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

médias

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"

origine des styles

 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électeurs

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

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

sélecteur de classe et d’id

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

sélecteur de classe et d’id

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

sélecteurs de pseudo-classes et pseudo-éléments

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

sélecteurs de pseudo-classes et pseudo-éléments

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)

       

body>h1

   
 

div em

     

div p em

   

au programme

1   Cascade

2   Sélecteurs

3   Priorités

4 Pseudo-

18

au programme

1   Cascade

2   Sélecteurs

3   Priorités

4   Pseudo-

19

conflit entre règles

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> ¹p[lang=en] { b-g:green; } <p>second</p> 1p.bleu { b-g:lightblue; }

<p>troisie`me</p> ¹p+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> ¹p+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> ¹p+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> ¹p+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> ¹p+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> ¹p+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

5 >  7   1 6 7 1 6 7

1 2 3 4 5 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

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>                                             ⁷p+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>                                             ⁷p+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>                                             ⁷p+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>                                             ⁷p+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>                                             ⁷p+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>                                             ⁷p+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>                                             ⁷p+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>                                             ⁷p+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>                                             ⁷p+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

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

4Pseudo-

24

au programme

1   Cascade

2   Sélecteurs

3Priorités

4Pseudo-

25

pseudo-classes

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

pseudo-classes (suite) et pseudo-éléments

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

 

:first-child

     

div>h1:first-child

   

exemple

 

29