Cascade

S
electeurs

Priorit
es

Pseudo-

CSS : cascades et s
electeurs

Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

Cascade

S
electeurs

Priorit
es

Pseudo-

au programme...

Cascade

S
electeurs

Priorit
es

Pseudo-

Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

Cascade

S
electeurs

Priorit
es

Pseudo-

au programme...

Cascade

S
electeurs

Priorit
es

Pseudo-

Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

Cascade

S
electeurs

Priorit
es

Pseudo-

conflits

un meme document peut utiliser plusieurs feuilles de style

il peut y avoir des r`egles en conflit

Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

Cascade

S
electeurs

Priorit
es

Pseudo-

conflits

un meme document peut utiliser plusieurs feuilles de style

il peut y avoir des r`egles en conflit
1
2
3

Universit
e Lille 1

les selecteurs selectionnent des elements communs

portent sur la meme propriete
attribuent des valeurs differentes

Technologies du Web CSS : les s

electeurs

Cascade

S
electeurs

Priorit
es

Pseudo-

conflits

un meme document peut utiliser plusieurs feuilles de style

il peut y avoir des r`egles en conflit
1
2
3

les selecteurs selectionnent des elements communs

portent sur la meme propriete
attribuent des valeurs differentes

Comment resoudre ces conflits ?

Quelle r`egle est appliquee ?

Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

Cascade

S
electeurs

Priorit
es

Pseudo-

cascade

Cascade
Le mecanisme de cascade determine les r`egles appliquees.

Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

Cascade

S
electeurs

Priorit
es

Pseudo-

cascade

Cascade
Le mecanisme de cascade determine les r`egles appliquees.
3 etapes de filtre :
1 par m
edia
2 par origine
3 par sp
ecificite des selecteurs

Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

Cascade

S
electeurs

Priorit
es

Pseudo-

m
edias

possibilite de preciser le media dans auquel sapplique les r`egles

definies dans la feuille style
attribut media de la balise <link>
ex : media="screen" media="print"

Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

Cascade

S
electeurs

Priorit
es

Pseudo-

origine des styles

3 origines possibles pour les feuilles de style

auteur definies par lauteur de la page
utilisateur definies par celui qui consulte la page
navigateur definies par le navigateur
en general : auteur > utilisateur > navigateur
nuance par usage du mot-cle !important

plus de details : http: // openweb. eu. org/ articles/ cascade_ css

Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

Cascade

S
electeurs

Priorit
es

Pseudo-

au programme...

Cascade

S
electeurs

Priorit
es

Pseudo-

Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

Cascade

S
electeurs

Priorit
es

Pseudo-

au programme...

Cascade

S
electeurs

Priorit
es

Pseudo-

Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

Cascade

S
electeurs

Priorit
es

Pseudo-

s
electeurs
S
electeur
Le s
electeur determine les elements sur lesquels sapplique la r`egle.
necessite de savoir comment
definir les selecteurs appropries
sont gerees les priorites entre r`egles en conflit

Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

10

Cascade

S
electeurs

Priorit
es

Pseudo-

s
electeurs
S
electeur
Le s
electeur determine les elements sur lesquels sapplique la r`egle.
necessite de savoir comment
definir les selecteurs appropries
sont gerees les priorites entre r`egles en conflit
S
electeurs simples :
E tout element dont la balise est <E>
* tout element
Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

10

Cascade

S
electeurs

Priorit
es

Pseudo-

s
electeurs et attributs

E[att] tout element E dont lattribut att est defini

ex : p[lang], img[alt], *[title]

Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

11

Cascade

S
electeurs

Priorit
es

Pseudo-

s
electeurs et attributs

E[att] tout element E dont lattribut att est defini

ex : p[lang], img[alt], *[title]
E[att=val] tout element E dont lattribut att vaut val
ex : p[lang=fr]

Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

11

Cascade

S
electeurs

Priorit
es

Pseudo-

s
electeurs et attributs

E[att] tout element E dont lattribut att est defini

ex : p[lang], img[alt], *[title]
E[att=val] tout element E dont lattribut att vaut val
ex : p[lang=fr]
E[att=val] tout element E dont lattribut att est une liste de mots
separes par des espaces, lun de ces mots vaut exactement
val

Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

11

Cascade

S
electeurs

Priorit
es

Pseudo-

s
electeurs et attributs

E[att=prefixe] tout element E dont la valeur de lattribut att

commence exactement par prefixe
ex : a[href="[Link]

Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

12

Cascade

S
electeurs

Priorit
es

Pseudo-

s
electeurs et attributs

E[att=prefixe] tout element E dont la valeur de lattribut att

commence exactement par prefixe
ex : a[href="[Link]
E[att$=suffixe] tout element E dont la valeur de lattribut att se
termine exactement par suffixe
ex : img[src$=".png"], a[href$=".pdf"]

Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

12

Cascade

S
electeurs

Priorit
es

Pseudo-

s
electeurs et attributs

E[att=prefixe] tout element E dont la valeur de lattribut att

commence exactement par prefixe
ex : a[href="[Link]
E[att$=suffixe] tout element E dont la valeur de lattribut att se
termine exactement par suffixe
ex : img[src$=".png"], a[href$=".pdf"]
E[att*=val] tout element E dont la valeur de lattribut att
contient la sous-chane val
ex : figure[alt*="diagramme"], *[title*="timo"]

Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

12

Cascade

S
electeurs

Priorit
es

Pseudo-

s
electeur de classe et did
Cas particuliers des attributs class et id :
E.c tout element E appartenant `a la classe c
equivalent `a E[class=c]
ex : [Link], *.solution,
[Link][title="NB"]

Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

13

Cascade

S
electeurs

Priorit
es

Pseudo-

s
electeur de classe et did
Cas particuliers des attributs class et id :
E.c tout element E appartenant `a la classe c
equivalent `a E[class=c]
ex : [Link], *.solution,
[Link][title="NB"]
E#ident tout element E dont lid vaut ident
equivalent `a E[id=ident]
ex : img#joconde, *#joconde, #unique

Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

13

Cascade

S
electeurs

Priorit
es

Pseudo-

s
electeurs de pseudo-classes et pseudo-
el
ements

E:pseudoC tout element E appartenant `a la pseudo-classe pseudoC

ex : a:visited, [Link]:hover

pseudo-classes et pseudo-elements presentes plus loin

Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

14

Cascade

S
electeurs

Priorit
es

Pseudo-

s
electeurs de pseudo-classes et pseudo-
el
ements

E:pseudoC tout element E appartenant `a la pseudo-classe pseudoC

ex : a:visited, [Link]:hover
E::pseudoE tout pseudo-
el
ement pseudoE de lelement E
ex : h1::first-letter, p[lang=fr]::first-line

pseudo-classes et pseudo-elements presentes plus loin

Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

14

Cascade

S
electeurs

Priorit
es

Pseudo-

combinaison de s
electeurs
sappuie sur la structure arborescente du document
si Sel1 et Sel2 sont des selecteurs :
Sel1 Sel2 tout element selectionne par Sel2 descendant (emboite
dans) dun element selectionne par Sel1

Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

15

Cascade

S
electeurs

Priorit
es

Pseudo-

combinaison de s
electeurs
sappuie sur la structure arborescente du document
si Sel1 et Sel2 sont des selecteurs :
Sel1 Sel2 tout element selectionne par Sel2 descendant (emboite
dans) dun element selectionne par Sel1
Sel1 > Sel2 tout element selectionne par Sel2 qui est fils dun
element selectionne par Sel1

Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

15

Cascade

S
electeurs

Priorit
es

Pseudo-

combinaison de s
electeurs
sappuie sur la structure arborescente du document
si Sel1 et Sel2 sont des selecteurs :
Sel1 Sel2 tout element selectionne par Sel2 descendant (emboite
dans) dun element selectionne par Sel1
Sel1 > Sel2 tout element selectionne par Sel2 qui est fils dun
element selectionne par Sel1
Sel1 + Sel2 tout element selectionne par Sel2 qui suit
imm
ediatement un element selectionne par Sel1
(premier fr`
ere suivant)

Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

15

Cascade

S
electeurs

Priorit
es

Pseudo-

combinaison de s
electeurs
sappuie sur la structure arborescente du document
si Sel1 et Sel2 sont des selecteurs :
Sel1 Sel2 tout element selectionne par Sel2 descendant (emboite
dans) dun element selectionne par Sel1
Sel1 > Sel2 tout element selectionne par Sel2 qui est fils dun
element selectionne par Sel1
Sel1 + Sel2 tout element selectionne par Sel2 qui suit
imm
ediatement un element selectionne par Sel1
(premier fr`
ere suivant)
Sel1 Sel2 tout element selectionne par Sel2 qui suit un element
selectionne par Sel1 (un fr`
ere suivant)
Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

15

Cascade

S
electeurs

Priorit
es

Pseudo-

exemples
body
h1

p
em

h1

div
h1

ou

h1

div

em

em

body h1

Cr
edits figures Bruno Bogaert
Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

16

Cascade

S
electeurs

Priorit
es

Pseudo-

exemples
body

body
h1

p
em

h1

div
h1

ou

h1

div

em

em

body h1

h1

p
em

div
h1

h1

div

em

em

div h1

Cr
edits figures Bruno Bogaert
Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

16

Cascade

S
electeurs

Priorit
es

Pseudo-

exemples
body

body
h1

p
em

h1

div
h1

ou

h1

div

em

em

h1

p
em

div
h1

body h1

h1

div

em

em

div h1
body

h1

p
em

div
h1

h1

div

em

em

body>h1
Cr
edits figures Bruno Bogaert
Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

16

Cascade

S
electeurs

Priorit
es

Pseudo-

exemples
body

body
h1

p
em

h1

div
h1

h1

div

em

em

h1

p
em

body h1

ou

div
h1

p
em

em

em

body

div
h1

div

div h1

body
h1

h1

h1

div

em

em

body>h1

h1

p
em

div
h1

h1

div

em

em

div+h1
Cr
edits figures Bruno Bogaert

Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

16

Cascade

S
electeurs

Priorit
es

Pseudo-

exemples
body
h1

p
em

div
h1

h1

div

em

em

div em

Cr
edits figures Bruno Bogaert
Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

17

Cascade

S
electeurs

Priorit
es

Pseudo-

exemples
body
h1

p
em

body

div
h1

h1

div

em

em

div em

h1

p
em

div
h1

h1

div

em

em

div>em

Cr
edits figures Bruno Bogaert
Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

17

Cascade

S
electeurs

Priorit
es

Pseudo-

exemples
body
h1

p
em

body

div
h1

h1

h1

div

em

em

div

em

h1

div em

h1

div

em

em

div>em
body

h1

p
em

div
h1

h1

div

em

em

div p em
Cr
edits figures Bruno Bogaert
Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

17

Cascade

S
electeurs

Priorit
es

Pseudo-

exemples
body
h1

p
em

body

div
h1

h1

div

em

em

h1

p
em

div em

div
h1

p
em

em

em

body

div
h1

div

div>em

body
h1

h1

h1

div

em

em

div p em

h1

p
em

div
h1

h1

div

em

em

body>p em
Cr
edits figures Bruno Bogaert

Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

17

Cascade

S
electeurs

Priorit
es

Pseudo-

au programme...

Cascade

S
electeurs

Priorit
es

Pseudo-

Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

18

Cascade

S
electeurs

Priorit
es

Pseudo-

au programme...

Cascade

S
electeurs

Priorit
es

Pseudo-

Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

19

Cascade

S
electeurs

Priorit
es

Pseudo-

conflit entre r`
egles

Calcul de priorit
e
On compte pour chaque selecteur :
a nombre de selecteurs did (= nombre de #)
b nombre de classes, pseudo-classes ou dattributs
c nombre delements ou de pseudo-elements
Le selecteur recoit la priorite a b c.
Le selecteur avec la plus grande priorite lemporte.
En cas degalite, la derni`ere declaration lemporte.

Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

20

Cascade

S
electeurs

Priorit
es

Pseudo-

exemples
selecteur
* {...}
h1 {...}
[Link] {...}
#joconde {...}
div a {...}
div a:visited {...}
p [Link] {...}
p a[href$=.pdf] {...}
[Link] a[href$=.pdf] {...}
[Link] [Link] {...}
div#diaporama [Link] {...}
article p::first-letter {...}
article#special p::first-letter {...}
Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

21

Cascade

S
electeurs

Priorit
es

Pseudo-

exemples
selecteur
* {...}
h1 {...}
[Link] {...}
#joconde {...}
div a {...}
div a:visited {...}
p [Link] {...}
p a[href$=.pdf] {...}
[Link] a[href$=.pdf] {...}
[Link] [Link] {...}
div#diaporama [Link] {...}
article p::first-letter {...}
article#special p::first-letter {...}
Universit
e Lille 1

a b
0 0

Technologies du Web CSS : les s

electeurs

c
0

21

Cascade

S
electeurs

Priorit
es

Pseudo-

exemples
selecteur
* {...}
h1 {...}
[Link] {...}
#joconde {...}
div a {...}
div a:visited {...}
p [Link] {...}
p a[href$=.pdf] {...}
[Link] a[href$=.pdf] {...}
[Link] [Link] {...}
div#diaporama [Link] {...}
article p::first-letter {...}
article#special p::first-letter {...}
Universit
e Lille 1

a b
0 0
0 0

Technologies du Web CSS : les s

electeurs

c
0
1

21

Cascade

S
electeurs

Priorit
es

Pseudo-

exemples
selecteur
* {...}
h1 {...}
[Link] {...}
#joconde {...}
div a {...}
div a:visited {...}
p [Link] {...}
p a[href$=.pdf] {...}
[Link] a[href$=.pdf] {...}
[Link] [Link] {...}
div#diaporama [Link] {...}
article p::first-letter {...}
article#special p::first-letter {...}
Universit
e Lille 1

a b
0 0
0 0
0 1

Technologies du Web CSS : les s

electeurs

c
0
1
1

21

Cascade

S
electeurs

Priorit
es

Pseudo-

exemples
selecteur
* {...}
h1 {...}
[Link] {...}
#joconde {...}
div a {...}
div a:visited {...}
p [Link] {...}
p a[href$=.pdf] {...}
[Link] a[href$=.pdf] {...}
[Link] [Link] {...}
div#diaporama [Link] {...}
article p::first-letter {...}
article#special p::first-letter {...}
Universit
e Lille 1

a b
0 0
0 0
0 1
1 0

Technologies du Web CSS : les s

electeurs

c
0
1
1
0

21

Cascade

S
electeurs

Priorit
es

Pseudo-

exemples
selecteur
* {...}
h1 {...}
[Link] {...}
#joconde {...}
div a {...}
div a:visited {...}
p [Link] {...}
p a[href$=.pdf] {...}
[Link] a[href$=.pdf] {...}
[Link] [Link] {...}
div#diaporama [Link] {...}
article p::first-letter {...}
article#special p::first-letter {...}
Universit
e Lille 1

a b
0 0
0 0
0 1
1 0
0 0

Technologies du Web CSS : les s

electeurs

c
0
1
1
0
2

21

Cascade

S
electeurs

Priorit
es

Pseudo-

exemples
selecteur
* {...}
h1 {...}
[Link] {...}
#joconde {...}
div a {...}
div a:visited {...}
p [Link] {...}
p a[href$=.pdf] {...}
[Link] a[href$=.pdf] {...}
[Link] [Link] {...}
div#diaporama [Link] {...}
article p::first-letter {...}
article#special p::first-letter {...}
Universit
e Lille 1

a b
0 0
0 0
0 1
1 0
0 0
0 1

Technologies du Web CSS : les s

electeurs

c
0
1
1
0
2
2

21

Cascade

S
electeurs

Priorit
es

Pseudo-

exemples
selecteur
* {...}
h1 {...}
[Link] {...}
#joconde {...}
div a {...}
div a:visited {...}
p [Link] {...}
p a[href$=.pdf] {...}
[Link] a[href$=.pdf] {...}
[Link] [Link] {...}
div#diaporama [Link] {...}
article p::first-letter {...}
article#special p::first-letter {...}
Universit
e Lille 1

a b
0 0
0 0
0 1
1 0
0 0
0 1
0 1

Technologies du Web CSS : les s

electeurs

c
0
1
1
0
2
2
2

21

Cascade

S
electeurs

Priorit
es

Pseudo-

exemples
selecteur
* {...}
h1 {...}
[Link] {...}
#joconde {...}
div a {...}
div a:visited {...}
p [Link] {...}
p a[href$=.pdf] {...}
[Link] a[href$=.pdf] {...}
[Link] [Link] {...}
div#diaporama [Link] {...}
article p::first-letter {...}
article#special p::first-letter {...}
Universit
e Lille 1

a b
0 0
0 0
0 1
1 0
0 0
0 1
0 1
0 1

Technologies du Web CSS : les s

electeurs

c
0
1
1
0
2
2
2
2

21

Cascade

S
electeurs

Priorit
es

Pseudo-

exemples
selecteur
* {...}
h1 {...}
[Link] {...}
#joconde {...}
div a {...}
div a:visited {...}
p [Link] {...}
p a[href$=.pdf] {...}
[Link] a[href$=.pdf] {...}
[Link] [Link] {...}
div#diaporama [Link] {...}
article p::first-letter {...}
article#special p::first-letter {...}
Universit
e Lille 1

a b
0 0
0 0
0 1
1 0
0 0
0 1
0 1
0 1
0 2

Technologies du Web CSS : les s

electeurs

c
0
1
1
0
2
2
2
2
2

21

Cascade

S
electeurs

Priorit
es

Pseudo-

exemples
selecteur
* {...}
h1 {...}
[Link] {...}
#joconde {...}
div a {...}
div a:visited {...}
p [Link] {...}
p a[href$=.pdf] {...}
[Link] a[href$=.pdf] {...}
[Link] [Link] {...}
div#diaporama [Link] {...}
article p::first-letter {...}
article#special p::first-letter {...}
Universit
e Lille 1

a b
0 0
0 0
0 1
1 0
0 0
0 1
0 1
0 1
0 2
0 2

Technologies du Web CSS : les s

electeurs

c
0
1
1
0
2
2
2
2
2
2

21

Cascade

S
electeurs

Priorit
es

Pseudo-

exemples
selecteur
* {...}
h1 {...}
[Link] {...}
#joconde {...}
div a {...}
div a:visited {...}
p [Link] {...}
p a[href$=.pdf] {...}
[Link] a[href$=.pdf] {...}
[Link] [Link] {...}
div#diaporama [Link] {...}
article p::first-letter {...}
article#special p::first-letter {...}
Universit
e Lille 1

a b
0 0
0 0
0 1
1 0
0 0
0 1
0 1
0 1
0 2
0 2
1 1

Technologies du Web CSS : les s

electeurs

c
0
1
1
0
2
2
2
2
2
2
2

21

Cascade

S
electeurs

Priorit
es

Pseudo-

exemples
selecteur
* {...}
h1 {...}
[Link] {...}
#joconde {...}
div a {...}
div a:visited {...}
p [Link] {...}
p a[href$=.pdf] {...}
[Link] a[href$=.pdf] {...}
[Link] [Link] {...}
div#diaporama [Link] {...}
article p::first-letter {...}
article#special p::first-letter {...}
Universit
e Lille 1

a b
0 0
0 0
0 1
1 0
0 0
0 1
0 1
0 1
0 2
0 2
1 1
0 0

Technologies du Web CSS : les s

electeurs

c
0
1
1
0
2
2
2
2
2
2
2
3
21

Cascade

S
electeurs

Priorit
es

Pseudo-

exemples
selecteur
* {...}
h1 {...}
[Link] {...}
#joconde {...}
div a {...}
div a:visited {...}
p [Link] {...}
p a[href$=.pdf] {...}
[Link] a[href$=.pdf] {...}
[Link] [Link] {...}
div#diaporama [Link] {...}
article p::first-letter {...}
article#special p::first-letter {...}
Universit
e Lille 1

a b
0 0
0 0
0 1
1 0
0 0
0 1
0 1
0 1
0 2
0 2
1 1
0 0
1 0

Technologies du Web CSS : les s

electeurs

c
0
1
1
0
2
2
2
2
2
2
2
3
3
21

Cascade

S
electeurs

Priorit
es

Pseudo-

b-g = background-color
1
2

<p>zero</p>
<h1>Titre</h1>
<p>premier</p>
<p>second</p>
<p>troisi`
eme</p>
<p lang="en">fourth </p>
<p class="bleu">cinqui`
eme</p>
<p class="bleu">sixi`
eme</p>
<p class="bleu" id="special">7`
eme</p>
<p>huiti`
eme</p>
<div>
<p>neuvi`
eme</p>
<p lang="en">tenth</p>
</div>
<p>onzi`
eme
</p>
<h1>Second titre </h1>
<p>douzi`
eme</p>

Universit
e Lille 1

3
4
5
6
7

p { b-g :pink }
h1+p { b-g:red; }
div>p { b-g:yellow; }
p#special { b-g:gold; }
p[lang=en] { b-g:green; }
[Link] { b-g:lightblue; }
p+p { b-g:lightgreen; }

Technologies du Web CSS : les s

electeurs

22

Cascade

S
electeurs

Priorit
es

Pseudo-

b-g = background-color
1
2

<p>zero</p>
<h1>Titre</h1>
<p>premier</p>
<p>second</p>
<p>troisi`
eme</p>
<p lang="en">fourth </p>
<p class="bleu">cinqui`
eme</p>
<p class="bleu">sixi`
eme</p>
<p class="bleu" id="special">7`
eme</p>
<p>huiti`
eme</p>
<div>
<p>neuvi`
eme</p>
<p lang="en">tenth</p>
</div>
<p>onzi`
eme
</p>
<h1>Second titre </h1>
<p>douzi`
eme</p>

Universit
e Lille 1

3
4
5
6
7

p { b-g :pink }
h1+p { b-g:red; }
div>p { b-g:yellow; }
p#special { b-g:gold; }
p[lang=en] { b-g:green; }
[Link] { b-g:lightblue; }
p+p { b-g:lightgreen; }

Technologies du Web CSS : les s

electeurs

22

Cascade

S
electeurs

Priorit
es

Pseudo-

b-g = background-color
1
2

<p>zero</p>
<h1>Titre</h1>
<p>premier</p>
<p>second</p>
<p>troisi`
eme</p>
<p lang="en">fourth </p>
<p class="bleu">cinqui`
eme</p>
<p class="bleu">sixi`
eme</p>
<p class="bleu" id="special">7`
eme</p>
<p>huiti`
eme</p>
<div>
<p>neuvi`
eme</p>
<p lang="en">tenth</p>
</div>
<p>onzi`
eme
</p>
<h1>Second titre </h1>
<p>douzi`
eme</p>

Universit
e Lille 1

3
4
5
6
7

p { b-g :pink }
h1+p { b-g:red; }
div>p { b-g:yellow; }
p#special { b-g:gold; }
p[lang=en] { b-g:green; }
[Link] { b-g:lightblue; }
p+p { b-g:lightgreen; }

Technologies du Web CSS : les s

electeurs

22

Cascade

S
electeurs

Priorit
es

Pseudo-

b-g = background-color
1
2

<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p> 1
<p>second</p> 1
<p>troisi`
eme</p> 1
<p lang="en">fourth </p> 1
<p class="bleu">cinqui`
eme</p> 1
<p class="bleu">sixi`
eme</p> 1
<p class="bleu" id="special">7`
eme</p>
<p>huiti`
eme</p> 1
<div>
<p>neuvi`
eme</p> 1
<p lang="en">tenth</p> 1
</div>
<p>onzi`
eme 1 </p>
<h1>Second titre </h1>
<p>douzi`
eme</p> 1

Universit
e Lille 1

3
4
5
6
7

p { b-g :pink }
h1+p { b-g:red; }
div>p { b-g:yellow; }
p#special { b-g:gold; }
p[lang=en] { b-g:green; }
[Link] { b-g:lightblue; }
p+p { b-g:lightgreen; }

Technologies du Web CSS : les s

electeurs

22

Cascade

S
electeurs

Priorit
es

Pseudo-

b-g = background-color
1
2

<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p> 1 2
<p>second</p> 1
<p>troisi`
eme</p> 1
<p lang="en">fourth </p> 1
<p class="bleu">cinqui`
eme</p> 1
<p class="bleu">sixi`
eme</p> 1
<p class="bleu" id="special">7`
eme</p>
<p>huiti`
eme</p> 1
<div>
<p>neuvi`
eme</p> 1
<p lang="en">tenth</p> 1
</div>
<p>onzi`
eme 1 </p>
<h1>Second titre </h1>
<p>douzi`
eme</p> 1 2

Universit
e Lille 1

3
4
5
6
7

p { b-g :pink }
h1+p { b-g:red; }
div>p { b-g:yellow; }
p#special { b-g:gold; }
p[lang=en] { b-g:green; }
[Link] { b-g:lightblue; }
p+p { b-g:lightgreen; }

Technologies du Web CSS : les s

electeurs

22

Cascade

S
electeurs

Priorit
es

Pseudo-

b-g = background-color
1
2

<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p> 1 2
<p>second</p> 1
<p>troisi`
eme</p> 1
<p lang="en">fourth </p> 1
<p class="bleu">cinqui`
eme</p> 1
<p class="bleu">sixi`
eme</p> 1
<p class="bleu" id="special">7`
eme</p>
<p>huiti`
eme</p> 1
<div>
<p>neuvi`
eme</p> 1 3
<p lang="en">tenth</p> 1 3
</div>
<p>onzi`
eme 1 </p>
<h1>Second titre </h1>
<p>douzi`
eme</p> 1 2

Universit
e Lille 1

3
4
5
6
7

p { b-g :pink }
h1+p { b-g:red; }
div>p { b-g:yellow; }
p#special { b-g:gold; }
p[lang=en] { b-g:green; }
[Link] { b-g:lightblue; }
p+p { b-g:lightgreen; }

Technologies du Web CSS : les s

electeurs

22

Cascade

S
electeurs

Priorit
es

Pseudo-

b-g = background-color
1
2

<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p> 1 2
<p>second</p> 1
<p>troisi`
eme</p> 1
<p lang="en">fourth </p> 1
<p class="bleu">cinqui`
eme</p> 1
<p class="bleu">sixi`
eme</p> 1
<p class="bleu" id="special">7`
eme</p>
<p>huiti`
eme</p> 1
<div>
<p>neuvi`
eme</p> 1 3
<p lang="en">tenth</p> 1 3
</div>
<p>onzi`
eme 1 </p>
<h1>Second titre </h1>
<p>douzi`
eme</p> 1 2

Universit
e Lille 1

3
4
5
6
7

p { b-g :pink }
h1+p { b-g:red; }
div>p { b-g:yellow; }
p#special { b-g:gold; }
p[lang=en] { b-g:green; }
[Link] { b-g:lightblue; }
p+p { b-g:lightgreen; }

Technologies du Web CSS : les s

electeurs

22

Cascade

S
electeurs

Priorit
es

Pseudo-

b-g = background-color
1
2

<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p> 1 2
<p>second</p> 1
<p>troisi`
eme</p> 1
<p lang="en">fourth </p> 1 5
<p class="bleu">cinqui`
eme</p> 1
<p class="bleu">sixi`
eme</p> 1
<p class="bleu" id="special">7`
eme</p>
<p>huiti`
eme</p> 1
<div>
<p>neuvi`
eme</p> 1 3
<p lang="en">tenth</p> 1 3 5
</div>
<p>onzi`
eme 1 </p>
<h1>Second titre </h1>
<p>douzi`
eme</p> 1 2

Universit
e Lille 1

3
4
5
6
7

p { b-g :pink }
h1+p { b-g:red; }
div>p { b-g:yellow; }
p#special { b-g:gold; }
p[lang=en] { b-g:green; }
[Link] { b-g:lightblue; }
p+p { b-g:lightgreen; }

Technologies du Web CSS : les s

electeurs

22

Cascade

S
electeurs

Priorit
es

Pseudo-

b-g = background-color
1
2

<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p> 1 2
<p>second</p> 1
<p>troisi`
eme</p> 1
<p lang="en">fourth </p> 1 5
<p class="bleu">cinqui`
eme</p> 1 6
<p class="bleu">sixi`
eme</p> 1 6
<p class="bleu" id="special">7`
eme</p>
<p>huiti`
eme</p> 1
<div>
<p>neuvi`
eme</p> 1 3
<p lang="en">tenth</p> 1 3 5
</div>
<p>onzi`
eme 1 </p>
<h1>Second titre </h1>
<p>douzi`
eme</p> 1 2

Universit
e Lille 1

3
4
5
6
7

p { b-g :pink }
h1+p { b-g:red; }
div>p { b-g:yellow; }
p#special { b-g:gold; }
p[lang=en] { b-g:green; }
[Link] { b-g:lightblue; }
p+p { b-g:lightgreen; }

Technologies du Web CSS : les s

electeurs

22

Cascade

S
electeurs

Priorit
es

Pseudo-

b-g = background-color
1
2

<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p> 1 2
<p>second</p> 1 7
<p>troisi`
eme</p> 1 7
<p lang="en">fourth </p> 1 5 7
<p class="bleu">cinqui`
eme</p> 1 6 7
<p class="bleu">sixi`
eme</p> 1 6 7
<p class="bleu" id="special">7`
eme</p>
<p>huiti`
eme</p> 1 7
<div>
<p>neuvi`
eme</p> 1 3
<p lang="en">tenth</p> 1 3 5 7
</div>
<p>onzi`
eme 1 </p>
<h1>Second titre </h1>
<p>douzi`
eme</p> 1 2

Universit
e Lille 1

3
4
5
6
7

p { b-g :pink }
h1+p { b-g:red; }
div>p { b-g:yellow; }
p#special { b-g:gold; }
p[lang=en] { b-g:green; }
[Link] { b-g:lightblue; }
p+p { b-g:lightgreen; }

Technologies du Web CSS : les s

electeurs

22

Cascade

S
electeurs

Priorit
es

Pseudo-

b-g = background-color
1
2

<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p> 1 2
<p>second</p> 1 7
<p>troisi`
eme</p> 1 7
<p lang="en">fourth </p> 1 5 7
<p class="bleu">cinqui`
eme</p> 1 6 7
<p class="bleu">sixi`
eme</p> 1 6 7
<p class="bleu" id="special">7`
eme</p>
<p>huiti`
eme</p> 1 7
<div>
<p>neuvi`
eme</p> 1 3
<p lang="en">tenth</p> 1 3 5 7
</div>
<p>onzi`
eme 1 </p>
<h1>Second titre </h1>
<p>douzi`
eme</p> 1 2

Universit
e Lille 1

3
4
5
6
7

p { b-g :pink }
h1+p { b-g:red; }
div>p { b-g:yellow; }
p#special { b-g:gold; }
p[lang=en] { b-g:green; }
[Link] { b-g:lightblue; }
p+p { b-g:lightgreen; }
a

Technologies du Web CSS : les s

electeurs

22

Cascade

S
electeurs

Priorit
es

Pseudo-

b-g = background-color
1
2

<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p> 1 2
<p>second</p> 1 7
<p>troisi`
eme</p> 1 7
<p lang="en">fourth </p> 1 5 7
<p class="bleu">cinqui`
eme</p> 1 6 7
<p class="bleu">sixi`
eme</p> 1 6 7
<p class="bleu" id="special">7`
eme</p>
<p>huiti`
eme</p> 1 7
<div>
<p>neuvi`
eme</p> 1 3
<p lang="en">tenth</p> 1 3 5 7
</div>
<p>onzi`
eme 1 </p>
<h1>Second titre </h1>
<p>douzi`
eme</p> 1 2

Universit
e Lille 1

3
4
5
6
7

p { b-g :pink }
h1+p { b-g:red; }
div>p { b-g:yellow; }
p#special { b-g:gold; }
p[lang=en] { b-g:green; }
[Link] { b-g:lightblue; }
p+p { b-g:lightgreen; }
a

4 > 6 > 5 > 7 > 3 > 2 > 1

Technologies du Web CSS : les s

electeurs

22

Cascade

S
electeurs

Priorit
es

Pseudo-

b-g = background-color
1
2

<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p>
2
<p>second</p> 1 7
<p>troisi`
eme</p> 1 7
<p lang="en">fourth </p> 1 5 7
<p class="bleu">cinqui`
eme</p> 1 6 7
<p class="bleu">sixi`
eme</p> 1 6 7
<p class="bleu" id="special">7`
eme</p>
<p>huiti`
eme</p> 1 7
<div>
<p>neuvi`
eme</p> 1 3
<p lang="en">tenth</p> 1 3 5 7
</div>
<p>onzi`
eme 1 </p>
<h1>Second titre </h1>
<p>douzi`
eme</p> 1 2

Universit
e Lille 1

3
4
5
6
7

p { b-g :pink }
h1+p { b-g:red; }
div>p { b-g:yellow; }
p#special { b-g:gold; }
p[lang=en] { b-g:green; }
[Link] { b-g:lightblue; }
p+p { b-g:lightgreen; }
a

4 > 6 > 5 > 7 > 3 > 2 > 1

Technologies du Web CSS : les s

electeurs

22

Cascade

S
electeurs

Priorit
es

Pseudo-

b-g = background-color
1
2

<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p>
2
<p>second</p>
7
<p>troisi`
eme</p> 1 7
<p lang="en">fourth </p> 1 5 7
<p class="bleu">cinqui`
eme</p> 1 6 7
<p class="bleu">sixi`
eme</p> 1 6 7
<p class="bleu" id="special">7`
eme</p>
<p>huiti`
eme</p> 1 7
<div>
<p>neuvi`
eme</p> 1 3
<p lang="en">tenth</p> 1 3 5 7
</div>
<p>onzi`
eme 1 </p>
<h1>Second titre </h1>
<p>douzi`
eme</p> 1 2

Universit
e Lille 1

3
4
5
6
7

p { b-g :pink }
h1+p { b-g:red; }
div>p { b-g:yellow; }
p#special { b-g:gold; }
p[lang=en] { b-g:green; }
[Link] { b-g:lightblue; }
p+p { b-g:lightgreen; }
a

4 > 6 > 5 > 7 > 3 > 2 > 1

Technologies du Web CSS : les s

electeurs

22

Cascade

S
electeurs

Priorit
es

Pseudo-

b-g = background-color
1
2

<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p>
2
<p>second</p>
7
7
<p>troisi`
eme</p>
<p lang="en">fourth </p> 1 5 7
<p class="bleu">cinqui`
eme</p> 1 6 7
<p class="bleu">sixi`
eme</p> 1 6 7
<p class="bleu" id="special">7`
eme</p>
<p>huiti`
eme</p> 1 7
<div>
<p>neuvi`
eme</p> 1 3
<p lang="en">tenth</p> 1 3 5 7
</div>
<p>onzi`
eme 1 </p>
<h1>Second titre </h1>
<p>douzi`
eme</p> 1 2

Universit
e Lille 1

3
4
5
6
7

p { b-g :pink }
h1+p { b-g:red; }
div>p { b-g:yellow; }
p#special { b-g:gold; }
p[lang=en] { b-g:green; }
[Link] { b-g:lightblue; }
p+p { b-g:lightgreen; }
a

4 > 6 > 5 > 7 > 3 > 2 > 1

Technologies du Web CSS : les s

electeurs

22

Cascade

S
electeurs

Priorit
es

Pseudo-

b-g = background-color
1
2

<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p>
2
<p>second</p>
7
7
<p>troisi`
eme</p>
5
<p lang="en">fourth </p>
<p class="bleu">cinqui`
eme</p> 1 6 7
<p class="bleu">sixi`
eme</p> 1 6 7
<p class="bleu" id="special">7`
eme</p>
<p>huiti`
eme</p> 1 7
<div>
<p>neuvi`
eme</p> 1 3
<p lang="en">tenth</p> 1 3 5 7
</div>
<p>onzi`
eme 1 </p>
<h1>Second titre </h1>
<p>douzi`
eme</p> 1 2

Universit
e Lille 1

3
4
5
6
7

p { b-g :pink }
h1+p { b-g:red; }
div>p { b-g:yellow; }
p#special { b-g:gold; }
p[lang=en] { b-g:green; }
[Link] { b-g:lightblue; }
p+p { b-g:lightgreen; }
a

4 > 6 > 5 > 7 > 3 > 2 > 1

Technologies du Web CSS : les s

electeurs

22

Cascade

S
electeurs

Priorit
es

Pseudo-

b-g = background-color
1
2

<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p>
2
<p>second</p>
7
7
<p>troisi`
eme</p>
5
<p lang="en">fourth </p>
<p class="bleu">cinqui`
eme</p>
6
<p class="bleu">sixi`
eme</p> 1 6 7
<p class="bleu" id="special">7`
eme</p>
<p>huiti`
eme</p> 1 7
<div>
<p>neuvi`
eme</p> 1 3
<p lang="en">tenth</p> 1 3 5 7
</div>
<p>onzi`
eme 1 </p>
<h1>Second titre </h1>
<p>douzi`
eme</p> 1 2

Universit
e Lille 1

3
4
5
6
7

p { b-g :pink }
h1+p { b-g:red; }
div>p { b-g:yellow; }
p#special { b-g:gold; }
p[lang=en] { b-g:green; }
[Link] { b-g:lightblue; }
p+p { b-g:lightgreen; }
a

4 > 6 > 5 > 7 > 3 > 2 > 1

Technologies du Web CSS : les s

electeurs

22

Cascade

S
electeurs

Priorit
es

Pseudo-

b-g = background-color
1
2

<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p>
2
<p>second</p>
7
7
<p>troisi`
eme</p>
5
<p lang="en">fourth </p>
<p class="bleu">cinqui`
eme</p>
6
6
<p class="bleu">sixi`
eme</p>
<p class="bleu" id="special">7`
eme</p>
<p>huiti`
eme</p> 1 7
<div>
<p>neuvi`
eme</p> 1 3
<p lang="en">tenth</p> 1 3 5 7
</div>
<p>onzi`
eme 1 </p>
<h1>Second titre </h1>
<p>douzi`
eme</p> 1 2

Universit
e Lille 1

3
4
5
6
7

p { b-g :pink }
h1+p { b-g:red; }
div>p { b-g:yellow; }
p#special { b-g:gold; }
p[lang=en] { b-g:green; }
[Link] { b-g:lightblue; }
p+p { b-g:lightgreen; }
a

4 > 6 > 5 > 7 > 3 > 2 > 1

Technologies du Web CSS : les s

electeurs

22

Cascade

S
electeurs

Priorit
es

Pseudo-

b-g = background-color
1
2

<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p>
2
<p>second</p>
7
7
<p>troisi`
eme</p>
5
<p lang="en">fourth </p>
<p class="bleu">cinqui`
eme</p>
6
6
<p class="bleu">sixi`
eme</p>
<p class="bleu" id="special">7`
eme</p>
<p>huiti`
eme</p> 1 7
<div>
<p>neuvi`
eme</p> 1 3
<p lang="en">tenth</p> 1 3 5 7
</div>
<p>onzi`
eme 1 </p>
<h1>Second titre </h1>
<p>douzi`
eme</p> 1 2

Universit
e Lille 1

3
4
5
6
7

p { b-g :pink }
h1+p { b-g:red; }
div>p { b-g:yellow; }
p#special { b-g:gold; }
p[lang=en] { b-g:green; }
[Link] { b-g:lightblue; }
p+p { b-g:lightgreen; }
a

4 > 6 > 5 > 7 > 3 > 2 > 1

Technologies du Web CSS : les s

electeurs

22

Cascade

S
electeurs

Priorit
es

Pseudo-

b-g = background-color
1
2

<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p>
2
<p>second</p>
7
7
<p>troisi`
eme</p>
5
<p lang="en">fourth </p>
<p class="bleu">cinqui`
eme</p>
6
6
<p class="bleu">sixi`
eme</p>
<p class="bleu" id="special">7`
eme</p>
<p>huiti`
eme</p>
7
<div>
<p>neuvi`
eme</p> 1 3
<p lang="en">tenth</p> 1 3 5 7
</div>
<p>onzi`
eme 1 </p>
<h1>Second titre </h1>
<p>douzi`
eme</p> 1 2

Universit
e Lille 1

3
4
5
6
7

p { b-g :pink }
h1+p { b-g:red; }
div>p { b-g:yellow; }
p#special { b-g:gold; }
p[lang=en] { b-g:green; }
[Link] { b-g:lightblue; }
p+p { b-g:lightgreen; }
a

4 > 6 > 5 > 7 > 3 > 2 > 1

Technologies du Web CSS : les s

electeurs

22

Cascade

S
electeurs

Priorit
es

Pseudo-

b-g = background-color
1
2

<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p>
2
<p>second</p>
7
7
<p>troisi`
eme</p>
5
<p lang="en">fourth </p>
<p class="bleu">cinqui`
eme</p>
6
6
<p class="bleu">sixi`
eme</p>
<p class="bleu" id="special">7`
eme</p>
<p>huiti`
eme</p>
7
<div>
3
<p>neuvi`
eme</p>
<p lang="en">tenth</p> 1 3 5 7
</div>
<p>onzi`
eme 1 </p>
<h1>Second titre </h1>
<p>douzi`
eme</p> 1 2

Universit
e Lille 1

3
4
5
6
7

p { b-g :pink }
h1+p { b-g:red; }
div>p { b-g:yellow; }
p#special { b-g:gold; }
p[lang=en] { b-g:green; }
[Link] { b-g:lightblue; }
p+p { b-g:lightgreen; }
a

4 > 6 > 5 > 7 > 3 > 2 > 1

Technologies du Web CSS : les s

electeurs

22

Cascade

S
electeurs

Priorit
es

Pseudo-

b-g = background-color
1
2

<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p>
2
<p>second</p>
7
7
<p>troisi`
eme</p>
5
<p lang="en">fourth </p>
<p class="bleu">cinqui`
eme</p>
6
6
<p class="bleu">sixi`
eme</p>
<p class="bleu" id="special">7`
eme</p>
<p>huiti`
eme</p>
7
<div>
3
<p>neuvi`
eme</p>
<p lang="en">tenth</p>
5
</div>
<p>onzi`
eme 1 </p>
<h1>Second titre </h1>
<p>douzi`
eme</p> 1 2

Universit
e Lille 1

3
4
5
6
7

p { b-g :pink }
h1+p { b-g:red; }
div>p { b-g:yellow; }
p#special { b-g:gold; }
p[lang=en] { b-g:green; }
[Link] { b-g:lightblue; }
p+p { b-g:lightgreen; }
a

4 > 6 > 5 > 7 > 3 > 2 > 1

Technologies du Web CSS : les s

electeurs

22

Cascade

S
electeurs

Priorit
es

Pseudo-

b-g = background-color
1
2

<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p>
2
<p>second</p>
7
7
<p>troisi`
eme</p>
5
<p lang="en">fourth </p>
<p class="bleu">cinqui`
eme</p>
6
6
<p class="bleu">sixi`
eme</p>
<p class="bleu" id="special">7`
eme</p>
<p>huiti`
eme</p>
7
<div>
3
<p>neuvi`
eme</p>
<p lang="en">tenth</p>
5
</div>
<p>onzi`
eme 1 </p>
<h1>Second titre </h1>
<p>douzi`
eme</p>
2

3
4
5
6
7

p { b-g :pink }
h1+p { b-g:red; }
div>p { b-g:yellow; }
p#special { b-g:gold; }
p[lang=en] { b-g:green; }
[Link] { b-g:lightblue; }
p+p { b-g:lightgreen; }
a

4 > 6 > 5 > 7 > 3 > 2 > 1

[Link]
Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

22

Cascade

S
electeurs

Priorit
es

Pseudo-

h
eritage

H
eritage
lorsque pour un element aucune r`egle ne definit de valeur pour
une propriete, cest la valeur de cette propriete pour son parent
qui sapplique

toutes les proprietes ne sheritent pas

ex : margin, padding, etc
la propriete inherit permet dagir sur lheritage

Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

23

Cascade

S
electeurs

Priorit
es

Pseudo-

au programme...

Cascade

S
electeurs

Priorit
es

Pseudo-

Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

24

Cascade

S
electeurs

Priorit
es

Pseudo-

au programme...

Cascade

S
electeurs

Priorit
es

Pseudo-

Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

25

Cascade

S
electeurs

Priorit
es

Pseudo-

pseudo-classes
non exhaustif

Structurelles
:empty un element E sans descendant (y compris nud texte)
:first-child un element qui est premier fils dun autre element
ex : [Link]:first-child
:last-child element dernier fils dun autre element
:nth-child(an + b) element (an + b)-`eme fils dun autre element
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)-`eme fils en partant de la fin
:nth-of-type(an + b) (an + b)n`eme element du type selectionne et
qui ont le meme p`ere
Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

26

Cascade

S
electeurs

Priorit
es

Pseudo-

pseudo-classes (suite) et pseudo-

el
ements
non exhaustif

Dynamiques
:hover est sous le pointeur de la souris
:visited (<a> uniquement) lien dej`a visite
:link (<a> uniquement) lien non encore visite
Pseudo-
el
ements
::first-line la premi`ere ligne formatee dun element
::first-letter le premi`ere lettre formatee dun element
::before insertion de contenu avant lelement
::after insertion de contenu apr`es lelement
Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

27

Cascade

S
electeurs

Priorit
es

Pseudo-

exemples
body
h1

p
em

div
h1

h1

div

em

em

:first-child

Cr
edits figures Bruno Bogaert
Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

28

Cascade

S
electeurs

Priorit
es

Pseudo-

exemples
body
h1

p
em

body

div
h1

h1

div

em

em

:first-child

h1

p
em

div
h1

h1

div

em

em

h1:first-child

Cr
edits figures Bruno Bogaert
Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

28

Cascade

S
electeurs

Priorit
es

Pseudo-

exemples
body
h1

p
em

body

div
h1

h1

h1

div

em

em

div

em

:first-child

h1

h1

div

em

em

h1:first-child
body

h1

p
em

div
h1

h1

div

em

em

div>h1:first-child
Cr
edits figures Bruno Bogaert
Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

28

Cascade

S
electeurs

Priorit
es

Pseudo-

exemples
body
h1

p
em

body

div
h1

h1

div

em

em

h1

p
em

:first-child

div
h1

p
em

em

em

body

div
h1

div

h1:first-child

body
h1

h1

h1

div

em

em

div>h1:first-child

h1

p
em

div
h1

h1

div

em

em

h1:first-child+*
Cr
edits figures Bruno Bogaert

Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

28

Cascade

S
electeurs

Priorit
es

Pseudo-

exemple

Cr
edits figures Bruno Bogaert
Universit
e Lille 1

Technologies du Web CSS : les s

electeurs

29