css : introductionuniversit´e lille 1 technologies du web – css : les s ´electeurs 12 cascade...
TRANSCRIPT
![Page 1: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/1.jpg)
Cascade Selecteurs Priorites Pseudo-
CSS : cascades et selecteurs
Universite Lille 1 Technologies du Web – CSS : les selecteurs 1
![Page 2: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/2.jpg)
Cascade Selecteurs Priorites Pseudo-
au programme...
1 Cascade
2 Selecteurs
3 Priorites
4 Pseudo-
Universite Lille 1 Technologies du Web – CSS : les selecteurs 2
![Page 3: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/3.jpg)
Cascade Selecteurs Priorites Pseudo-
au programme...
1 Cascade
2 Selecteurs
3 Priorites
4 Pseudo-
Universite Lille 1 Technologies du Web – CSS : les selecteurs 3
![Page 4: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/4.jpg)
Cascade Selecteurs Priorites Pseudo-
conflits
un meme document peut utiliser plusieurs feuilles de styleil peut y avoir des regles en conflit
1 les selecteurs selectionnent des elements communs2 portent sur la meme propriete3 attribuent des valeurs differentes
Comment resoudre ces conflits ?Quelle regle est appliquee ?
Universite Lille 1 Technologies du Web – CSS : les selecteurs 4
![Page 5: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/5.jpg)
Cascade Selecteurs Priorites Pseudo-
conflits
un meme document peut utiliser plusieurs feuilles de styleil peut y avoir des regles en conflit
1 les selecteurs selectionnent des elements communs2 portent sur la meme propriete3 attribuent des valeurs differentes
Comment resoudre ces conflits ?Quelle regle est appliquee ?
Universite Lille 1 Technologies du Web – CSS : les selecteurs 4
![Page 6: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/6.jpg)
Cascade Selecteurs Priorites Pseudo-
conflits
un meme document peut utiliser plusieurs feuilles de styleil peut y avoir des regles en conflit
1 les selecteurs selectionnent des elements communs2 portent sur la meme propriete3 attribuent des valeurs differentes
Comment resoudre ces conflits ?Quelle regle est appliquee ?
Universite Lille 1 Technologies du Web – CSS : les selecteurs 4
![Page 7: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/7.jpg)
Cascade Selecteurs Priorites Pseudo-
cascade
CascadeLe mecanisme de cascade determine les regles appliquees.
3 etapes de filtre :1 par media2 par origine3 par specificite des selecteurs
Universite Lille 1 Technologies du Web – CSS : les selecteurs 5
![Page 8: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/8.jpg)
Cascade Selecteurs Priorites Pseudo-
cascade
CascadeLe mecanisme de cascade determine les regles appliquees.
3 etapes de filtre :1 par media2 par origine3 par specificite des selecteurs
Universite Lille 1 Technologies du Web – CSS : les selecteurs 5
![Page 9: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/9.jpg)
Cascade Selecteurs Priorites Pseudo-
medias
possibilite de preciser le media dans auquel s’applique les reglesdefinies dans la feuille styleattribut media de la balise <link>
ex : media="screen" – media="print"
Universite Lille 1 Technologies du Web – CSS : les selecteurs 6
![Page 10: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/10.jpg)
Cascade Selecteurs Priorites Pseudo-
origine des styles
3 origines possibles pour les feuilles de styleauteur definies par l’auteur de la page
utilisateur definies par celui qui consulte la pagenavigateur definies par le navigateuren general : auteur > utilisateur > navigateur
nuance par usage du mot-cle !important
plus de details : http: // openweb. eu. org/ articles/ cascade_ css
Universite Lille 1 Technologies du Web – CSS : les selecteurs 7
![Page 11: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/11.jpg)
Cascade Selecteurs Priorites Pseudo-
au programme...
1 Cascade
2 Selecteurs
3 Priorites
4 Pseudo-
Universite Lille 1 Technologies du Web – CSS : les selecteurs 8
![Page 12: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/12.jpg)
Cascade Selecteurs Priorites Pseudo-
au programme...
1 Cascade
2 Selecteurs
3 Priorites
4 Pseudo-
Universite Lille 1 Technologies du Web – CSS : les selecteurs 9
![Page 13: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/13.jpg)
Cascade Selecteurs Priorites Pseudo-
selecteurs
SelecteurLe selecteur determine les elements sur lesquels s’applique la regle.
necessite de savoir commentdefinir les selecteurs appropriessont gerees les priorites entre regles en conflit
Selecteurs simples :E tout element dont la balise est <E>* tout element
Universite Lille 1 Technologies du Web – CSS : les selecteurs 10
![Page 14: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/14.jpg)
Cascade Selecteurs Priorites Pseudo-
selecteurs
SelecteurLe selecteur determine les elements sur lesquels s’applique la regle.
necessite de savoir commentdefinir les selecteurs appropriessont gerees les priorites entre regles en conflit
Selecteurs simples :E tout element dont la balise est <E>* tout element
Universite Lille 1 Technologies du Web – CSS : les selecteurs 10
![Page 15: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/15.jpg)
Cascade Selecteurs Priorites Pseudo-
selecteurs et attributs
E[att] tout element E dont l’attribut att est definiex : p[lang], img[alt], *[title]
E[att=val] tout element E dont l’attribut att vaut valex : p[lang=fr]
E[att∼=val] tout element E dont l’attribut att est une liste de motssepares par des espaces, l’un de ces mots vaut exactementval
Universite Lille 1 Technologies du Web – CSS : les selecteurs 11
![Page 16: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/16.jpg)
Cascade Selecteurs Priorites Pseudo-
selecteurs et attributs
E[att] tout element E dont l’attribut att est definiex : p[lang], img[alt], *[title]
E[att=val] tout element E dont l’attribut att vaut valex : p[lang=fr]
E[att∼=val] tout element E dont l’attribut att est une liste de motssepares par des espaces, l’un de ces mots vaut exactementval
Universite Lille 1 Technologies du Web – CSS : les selecteurs 11
![Page 17: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/17.jpg)
Cascade Selecteurs Priorites Pseudo-
selecteurs et attributs
E[att] tout element E dont l’attribut att est definiex : p[lang], img[alt], *[title]
E[att=val] tout element E dont l’attribut att vaut valex : p[lang=fr]
E[att∼=val] tout element E dont l’attribut att est une liste de motssepares par des espaces, l’un de ces mots vaut exactementval
Universite Lille 1 Technologies du Web – CSS : les selecteurs 11
![Page 18: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/18.jpg)
Cascade Selecteurs Priorites Pseudo-
selecteurs et attributs
E[attˆ=”prefixe”] tout element E dont la valeur de l’attribut attcommence exactement par prefixeex : a[hrefˆ="http://fil.univ-lille1.fr"]
E[att$=”suffixe”] tout element E dont la valeur de l’attribut att setermine exactement par suffixeex : img[src$=".png"], a[href$=".pdf"]
E[att*=”val”] tout element E dont la valeur de l’attribut attcontient la sous-chaıne valex : figure[alt*="diagramme"], *[title*="timo"]
Universite Lille 1 Technologies du Web – CSS : les selecteurs 12
![Page 19: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/19.jpg)
Cascade Selecteurs Priorites Pseudo-
selecteurs et attributs
E[attˆ=”prefixe”] tout element E dont la valeur de l’attribut attcommence exactement par prefixeex : a[hrefˆ="http://fil.univ-lille1.fr"]
E[att$=”suffixe”] tout element E dont la valeur de l’attribut att setermine exactement par suffixeex : img[src$=".png"], a[href$=".pdf"]
E[att*=”val”] tout element E dont la valeur de l’attribut attcontient la sous-chaıne valex : figure[alt*="diagramme"], *[title*="timo"]
Universite Lille 1 Technologies du Web – CSS : les selecteurs 12
![Page 20: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/20.jpg)
Cascade Selecteurs Priorites Pseudo-
selecteurs et attributs
E[attˆ=”prefixe”] tout element E dont la valeur de l’attribut attcommence exactement par prefixeex : a[hrefˆ="http://fil.univ-lille1.fr"]
E[att$=”suffixe”] tout element E dont la valeur de l’attribut att setermine exactement par suffixeex : img[src$=".png"], a[href$=".pdf"]
E[att*=”val”] tout element E dont la valeur de l’attribut attcontient la sous-chaıne valex : figure[alt*="diagramme"], *[title*="timo"]
Universite Lille 1 Technologies du Web – CSS : les selecteurs 12
![Page 21: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/21.jpg)
Cascade Selecteurs Priorites Pseudo-
selecteur de classe et d’id
Cas particuliers des attributs class et id :E.c tout element E appartenant a la classe c
equivalent a E[class∼=c]
ex : div.exercice, *.solution,div.rmq[titleˆ="NB"]
E#ident tout element E dont l’id vaut identequivalent a E[id=ident]
ex : img#joconde, *#joconde, #unique
Universite Lille 1 Technologies du Web – CSS : les selecteurs 13
![Page 22: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/22.jpg)
Cascade Selecteurs Priorites Pseudo-
selecteur de classe et d’id
Cas particuliers des attributs class et id :E.c tout element E appartenant a la classe c
equivalent a E[class∼=c]
ex : div.exercice, *.solution,div.rmq[titleˆ="NB"]
E#ident tout element E dont l’id vaut identequivalent a E[id=ident]
ex : img#joconde, *#joconde, #unique
Universite Lille 1 Technologies du Web – CSS : les selecteurs 13
![Page 23: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/23.jpg)
Cascade Selecteurs Priorites Pseudo-
selecteurs de pseudo-classes et pseudo-elements
E:pseudoC tout element E appartenant a la pseudo-classe pseudoC
ex : a:visited, a.fichier:hover
E::pseudoE tout pseudo-element pseudoE de l’element E
ex : h1::first-letter, p[lang=fr]::first-line
pseudo-classes et pseudo-elements presentes plus loin
Universite Lille 1 Technologies du Web – CSS : les selecteurs 14
![Page 24: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/24.jpg)
Cascade Selecteurs Priorites Pseudo-
selecteurs de pseudo-classes et pseudo-elements
E:pseudoC tout element E appartenant a la pseudo-classe pseudoC
ex : a:visited, a.fichier:hover
E::pseudoE tout pseudo-element pseudoE de l’element E
ex : h1::first-letter, p[lang=fr]::first-line
pseudo-classes et pseudo-elements presentes plus loin
Universite Lille 1 Technologies du Web – CSS : les selecteurs 14
![Page 25: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/25.jpg)
Cascade Selecteurs Priorites Pseudo-
combinaison de selecteurs
s’appuie sur la structure arborescente du document
si Sel1 et Sel2 sont des selecteurs :Sel1 Sel2 tout element selectionne par Sel2 descendant (emboite
dans) d’un element selectionne par Sel1
Sel1 > Sel2 tout element selectionne par Sel2 qui est fils d’unelement selectionne par Sel1
Sel1 + Sel2 tout element selectionne par Sel2 qui suitimmediatement un element selectionne par Sel1(premier frere suivant)
Sel1 ∼ Sel2 tout element selectionne par Sel2 qui suit un elementselectionne par Sel1 (un frere suivant)
Universite Lille 1 Technologies du Web – CSS : les selecteurs 15
![Page 26: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/26.jpg)
Cascade Selecteurs Priorites Pseudo-
combinaison de selecteurs
s’appuie sur la structure arborescente du document
si Sel1 et Sel2 sont des selecteurs :Sel1 Sel2 tout element selectionne par Sel2 descendant (emboite
dans) d’un element selectionne par Sel1Sel1 > Sel2 tout element selectionne par Sel2 qui est fils d’un
element selectionne par Sel1
Sel1 + Sel2 tout element selectionne par Sel2 qui suitimmediatement un element selectionne par Sel1(premier frere suivant)
Sel1 ∼ Sel2 tout element selectionne par Sel2 qui suit un elementselectionne par Sel1 (un frere suivant)
Universite Lille 1 Technologies du Web – CSS : les selecteurs 15
![Page 27: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/27.jpg)
Cascade Selecteurs Priorites Pseudo-
combinaison de selecteurs
s’appuie sur la structure arborescente du document
si Sel1 et Sel2 sont des selecteurs :Sel1 Sel2 tout element selectionne par Sel2 descendant (emboite
dans) d’un element selectionne par Sel1Sel1 > Sel2 tout element selectionne par Sel2 qui est fils d’un
element selectionne par Sel1Sel1 + Sel2 tout element selectionne par Sel2 qui suit
immediatement un element selectionne par Sel1(premier frere suivant)
Sel1 ∼ Sel2 tout element selectionne par Sel2 qui suit un elementselectionne par Sel1 (un frere suivant)
Universite Lille 1 Technologies du Web – CSS : les selecteurs 15
![Page 28: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/28.jpg)
Cascade Selecteurs Priorites Pseudo-
combinaison de selecteurs
s’appuie sur la structure arborescente du document
si Sel1 et Sel2 sont des selecteurs :Sel1 Sel2 tout element selectionne par Sel2 descendant (emboite
dans) d’un element selectionne par Sel1Sel1 > Sel2 tout element selectionne par Sel2 qui est fils d’un
element selectionne par Sel1Sel1 + Sel2 tout element selectionne par Sel2 qui suit
immediatement un element selectionne par Sel1(premier frere suivant)
Sel1 ∼ Sel2 tout element selectionne par Sel2 qui suit un elementselectionne par Sel1 (un frere suivant)
Universite Lille 1 Technologies du Web – CSS : les selecteurs 15
![Page 29: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/29.jpg)
Cascade Selecteurs Priorites Pseudo-
exemples
body h1h1 ou
body
p divh1
em h1
h1
div
em
p
em
p
em
Credits figures Bruno BogaertUniversite Lille 1 Technologies du Web – CSS : les selecteurs 16
![Page 30: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/30.jpg)
Cascade Selecteurs Priorites Pseudo-
exemples
body h1h1 ou
body
p divh1
em h1
h1
div
em
p
em
p
em
div h1
body
p divh1
em h1
h1
div
em
p
em
p
em
Credits figures Bruno BogaertUniversite Lille 1 Technologies du Web – CSS : les selecteurs 16
![Page 31: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/31.jpg)
Cascade Selecteurs Priorites Pseudo-
exemples
body h1h1 ou
body
p divh1
em h1
h1
div
em
p
em
p
em
div h1
body
p divh1
em h1
h1
div
em
p
em
p
em
body>h1
body
p divh1
em h1
h1
div
em
p
em
p
em
Credits figures Bruno BogaertUniversite Lille 1 Technologies du Web – CSS : les selecteurs 16
![Page 32: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/32.jpg)
Cascade Selecteurs Priorites Pseudo-
exemples
body h1h1 ou
body
p divh1
em h1
h1
div
em
p
em
p
em
div h1
body
p divh1
em h1
h1
div
em
p
em
p
em
body>h1
body
p divh1
em h1
h1
div
em
p
em
p
em
div+h1
body
p divh1
em h1
h1
div
em
p
em
p
em
Credits figures Bruno BogaertUniversite Lille 1 Technologies du Web – CSS : les selecteurs 16
![Page 33: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/33.jpg)
Cascade Selecteurs Priorites Pseudo-
exemples
div em
body
p divh1
em h1
h1
div
em
p
em
p
em
Credits figures Bruno BogaertUniversite Lille 1 Technologies du Web – CSS : les selecteurs 17
![Page 34: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/34.jpg)
Cascade Selecteurs Priorites Pseudo-
exemples
div em
body
p divh1
em h1
h1
div
em
p
em
p
em
div>em
body
p divh1
em h1
h1
div
em
p
em
p
em
Credits figures Bruno BogaertUniversite Lille 1 Technologies du Web – CSS : les selecteurs 17
![Page 35: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/35.jpg)
Cascade Selecteurs Priorites Pseudo-
exemples
div em
body
p divh1
em h1
h1
div
em
p
em
p
em
div>em
body
p divh1
em h1
h1
div
em
p
em
p
em
div p em
body
p divh1
em h1
h1
div
em
p
em
p
em
Credits figures Bruno BogaertUniversite Lille 1 Technologies du Web – CSS : les selecteurs 17
![Page 36: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/36.jpg)
Cascade Selecteurs Priorites Pseudo-
exemples
div em
body
p divh1
em h1
h1
div
em
p
em
p
em
div>em
body
p divh1
em h1
h1
div
em
p
em
p
em
div p em
body
p divh1
em h1
h1
div
em
p
em
p
em
body>p em
body
p divh1
em h1
h1
div
em
p
em
p
em
Credits figures Bruno BogaertUniversite Lille 1 Technologies du Web – CSS : les selecteurs 17
![Page 37: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/37.jpg)
Cascade Selecteurs Priorites Pseudo-
au programme...
1 Cascade
2 Selecteurs
3 Priorites
4 Pseudo-
Universite Lille 1 Technologies du Web – CSS : les selecteurs 18
![Page 38: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/38.jpg)
Cascade Selecteurs Priorites Pseudo-
au programme...
1 Cascade
2 Selecteurs
3 Priorites
4 Pseudo-
Universite Lille 1 Technologies du Web – CSS : les selecteurs 19
![Page 39: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/39.jpg)
Cascade Selecteurs Priorites Pseudo-
conflit entre regles
Calcul de prioriteOn compte pour chaque selecteur :
a nombre de selecteurs d’id (= nombre de #)b nombre de classes, pseudo-classes ou d’attributsc nombre d’elements ou de pseudo-elements
Le selecteur recoit la priorite a b c.Le selecteur avec la plus grande priorite l’emporte.
En cas d’egalite, la derniere declaration l’emporte.
Universite Lille 1 Technologies du Web – CSS : les selecteurs 20
![Page 40: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/40.jpg)
Cascade Selecteurs Priorites Pseudo-
exemples
selecteur 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
Universite Lille 1 Technologies du Web – CSS : les selecteurs 21
![Page 41: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/41.jpg)
Cascade Selecteurs Priorites Pseudo-
exemples
selecteur a b c* {...} 0 0 0h1 {...}
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
Universite Lille 1 Technologies du Web – CSS : les selecteurs 21
![Page 42: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/42.jpg)
Cascade Selecteurs Priorites Pseudo-
exemples
selecteur a b c* {...} 0 0 0h1 {...} 0 0 1div.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
Universite Lille 1 Technologies du Web – CSS : les selecteurs 21
![Page 43: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/43.jpg)
Cascade Selecteurs Priorites Pseudo-
exemples
selecteur a b c* {...} 0 0 0h1 {...} 0 0 1div.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
Universite Lille 1 Technologies du Web – CSS : les selecteurs 21
![Page 44: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/44.jpg)
Cascade Selecteurs Priorites Pseudo-
exemples
selecteur a b c* {...} 0 0 0h1 {...} 0 0 1div.reponse {...} 0 1 1#joconde {...} 1 0 0div 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
Universite Lille 1 Technologies du Web – CSS : les selecteurs 21
![Page 45: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/45.jpg)
Cascade Selecteurs Priorites Pseudo-
exemples
selecteur a b c* {...} 0 0 0h1 {...} 0 0 1div.reponse {...} 0 1 1#joconde {...} 1 0 0div a {...} 0 0 2div 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
Universite Lille 1 Technologies du Web – CSS : les selecteurs 21
![Page 46: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/46.jpg)
Cascade Selecteurs Priorites Pseudo-
exemples
selecteur a b c* {...} 0 0 0h1 {...} 0 0 1div.reponse {...} 0 1 1#joconde {...} 1 0 0div a {...} 0 0 2div a:visited {...} 0 1 2p 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
Universite Lille 1 Technologies du Web – CSS : les selecteurs 21
![Page 47: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/47.jpg)
Cascade Selecteurs Priorites Pseudo-
exemples
selecteur a b c* {...} 0 0 0h1 {...} 0 0 1div.reponse {...} 0 1 1#joconde {...} 1 0 0div a {...} 0 0 2div a:visited {...} 0 1 2p span.fichier {...} 0 1 2p 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
Universite Lille 1 Technologies du Web – CSS : les selecteurs 21
![Page 48: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/48.jpg)
Cascade Selecteurs Priorites Pseudo-
exemples
selecteur a b c* {...} 0 0 0h1 {...} 0 0 1div.reponse {...} 0 1 1#joconde {...} 1 0 0div a {...} 0 0 2div a:visited {...} 0 1 2p span.fichier {...} 0 1 2p a[href$=”.pdf”] {...} 0 1 2p.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
Universite Lille 1 Technologies du Web – CSS : les selecteurs 21
![Page 49: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/49.jpg)
Cascade Selecteurs Priorites Pseudo-
exemples
selecteur a b c* {...} 0 0 0h1 {...} 0 0 1div.reponse {...} 0 1 1#joconde {...} 1 0 0div a {...} 0 0 2div a:visited {...} 0 1 2p span.fichier {...} 0 1 2p a[href$=”.pdf”] {...} 0 1 2p.enonce a[href$=”.pdf”] {...} 0 2 2ol.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
Universite Lille 1 Technologies du Web – CSS : les selecteurs 21
![Page 50: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/50.jpg)
Cascade Selecteurs Priorites Pseudo-
exemples
selecteur a b c* {...} 0 0 0h1 {...} 0 0 1div.reponse {...} 0 1 1#joconde {...} 1 0 0div a {...} 0 0 2div a:visited {...} 0 1 2p span.fichier {...} 0 1 2p a[href$=”.pdf”] {...} 0 1 2p.enonce a[href$=”.pdf”] {...} 0 2 2ol.exercice li.question {...} 0 2 2div#diaporama img.gauche {...}
1 1 2
article p::first-letter {...}
0 0 3
article#special p::first-letter {...}
1 0 3
Universite Lille 1 Technologies du Web – CSS : les selecteurs 21
![Page 51: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/51.jpg)
Cascade Selecteurs Priorites Pseudo-
exemples
selecteur a b c* {...} 0 0 0h1 {...} 0 0 1div.reponse {...} 0 1 1#joconde {...} 1 0 0div a {...} 0 0 2div a:visited {...} 0 1 2p span.fichier {...} 0 1 2p a[href$=”.pdf”] {...} 0 1 2p.enonce a[href$=”.pdf”] {...} 0 2 2ol.exercice li.question {...} 0 2 2div#diaporama img.gauche {...} 1 1 2article p::first-letter {...}
0 0 3
article#special p::first-letter {...}
1 0 3
Universite Lille 1 Technologies du Web – CSS : les selecteurs 21
![Page 52: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/52.jpg)
Cascade Selecteurs Priorites Pseudo-
exemples
selecteur a b c* {...} 0 0 0h1 {...} 0 0 1div.reponse {...} 0 1 1#joconde {...} 1 0 0div a {...} 0 0 2div a:visited {...} 0 1 2p span.fichier {...} 0 1 2p a[href$=”.pdf”] {...} 0 1 2p.enonce a[href$=”.pdf”] {...} 0 2 2ol.exercice li.question {...} 0 2 2div#diaporama img.gauche {...} 1 1 2article p::first-letter {...} 0 0 3article#special p::first-letter {...}
1 0 3
Universite Lille 1 Technologies du Web – CSS : les selecteurs 21
![Page 53: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/53.jpg)
Cascade Selecteurs Priorites Pseudo-
exemples
selecteur a b c* {...} 0 0 0h1 {...} 0 0 1div.reponse {...} 0 1 1#joconde {...} 1 0 0div a {...} 0 0 2div a:visited {...} 0 1 2p span.fichier {...} 0 1 2p a[href$=”.pdf”] {...} 0 1 2p.enonce a[href$=”.pdf”] {...} 0 2 2ol.exercice li.question {...} 0 2 2div#diaporama img.gauche {...} 1 1 2article p::first-letter {...} 0 0 3article#special p::first-letter {...} 1 0 3
Universite Lille 1 Technologies du Web – CSS : les selecteurs 21
![Page 54: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/54.jpg)
Cascade Selecteurs Priorites Pseudo-
<p>zero</p>
1
<h1>Titre</h1><p>premier</p>
1 2
<p>second</p>
1 7
<p>troisieme</p>
1 7
<p lang="en">fourth </p>
1 5 7
<p class="bleu">cinquieme</p>
1 6 7
<p class="bleu">sixieme</p>
1 6 7
<p class="bleu" id="special">7eme</p>
1 4 6 7
<p>huitieme</p>
1 7
<div><p>neuvieme</p>
1 3
<p lang="en">tenth</p>
1 3 5 7
</div><p>onzieme
1
</p><h1>Second titre </h1><p>douzieme</p>
1 2
b-g = background-color
1 p { b-g :pink }2 h1+p { b-g:red; }3 div>p { b-g:yellow; }4 p#special { b-g:gold; }5 p[lang=en] { b-g:green; }6 p.bleu { b-g:lightblue; }7 p+p { b-g:lightgreen; }
Universite Lille 1 Technologies du Web – CSS : les selecteurs 22
![Page 55: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/55.jpg)
Cascade Selecteurs Priorites Pseudo-
<p>zero</p>
1
<h1>Titre</h1><p>premier</p>
1 2
<p>second</p>
1 7
<p>troisieme</p>
1 7
<p lang="en">fourth </p>
1 5 7
<p class="bleu">cinquieme</p>
1 6 7
<p class="bleu">sixieme</p>
1 6 7
<p class="bleu" id="special">7eme</p>
1 4 6 7
<p>huitieme</p>
1 7
<div><p>neuvieme</p>
1 3
<p lang="en">tenth</p>
1 3 5 7
</div><p>onzieme
1
</p><h1>Second titre </h1><p>douzieme</p>
1 2
b-g = background-color
1 p { b-g :pink }2 h1+p { b-g:red; }3 div>p { b-g:yellow; }4 p#special { b-g:gold; }5 p[lang=en] { b-g:green; }6 p.bleu { b-g:lightblue; }7 p+p { b-g:lightgreen; }
Universite Lille 1 Technologies du Web – CSS : les selecteurs 22
![Page 56: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/56.jpg)
Cascade Selecteurs Priorites Pseudo-
<p>zero</p>
1
<h1>Titre</h1><p>premier</p>
1 2
<p>second</p>
1 7
<p>troisieme</p>
1 7
<p lang="en">fourth </p>
1 5 7
<p class="bleu">cinquieme</p>
1 6 7
<p class="bleu">sixieme</p>
1 6 7
<p class="bleu" id="special">7eme</p>
1 4 6 7
<p>huitieme</p>
1 7
<div><p>neuvieme</p>
1 3
<p lang="en">tenth</p>
1 3 5 7
</div><p>onzieme
1
</p><h1>Second titre </h1><p>douzieme</p>
1 2
b-g = background-color
1 p { b-g :pink }2 h1+p { b-g:red; }3 div>p { b-g:yellow; }4 p#special { b-g:gold; }5 p[lang=en] { b-g:green; }6 p.bleu { b-g:lightblue; }7 p+p { b-g:lightgreen; }
Universite Lille 1 Technologies du Web – CSS : les selecteurs 22
![Page 57: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/57.jpg)
Cascade Selecteurs Priorites Pseudo-
<p>zero</p> 1
<h1>Titre</h1><p>premier</p> 1
2
<p>second</p> 1
7
<p>troisieme</p> 1
7
<p lang="en">fourth </p> 1
5 7
<p class="bleu">cinquieme</p> 1
6 7
<p class="bleu">sixieme</p> 1
6 7
<p class="bleu" id="special">7eme</p> 1
4 6 7
<p>huitieme</p> 1
7
<div><p>neuvieme</p> 1
3
<p lang="en">tenth</p> 1
3 5 7
</div><p>onzieme 1 </p><h1>Second titre </h1><p>douzieme</p> 1
2
b-g = background-color
1 p { b-g :pink }2 h1+p { b-g:red; }3 div>p { b-g:yellow; }4 p#special { b-g:gold; }5 p[lang=en] { b-g:green; }6 p.bleu { b-g:lightblue; }7 p+p { b-g:lightgreen; }
Universite Lille 1 Technologies du Web – CSS : les selecteurs 22
![Page 58: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/58.jpg)
Cascade Selecteurs Priorites Pseudo-
<p>zero</p> 1
<h1>Titre</h1><p>premier</p> 1 2
<p>second</p> 1
7
<p>troisieme</p> 1
7
<p lang="en">fourth </p> 1
5 7
<p class="bleu">cinquieme</p> 1
6 7
<p class="bleu">sixieme</p> 1
6 7
<p class="bleu" id="special">7eme</p> 1
4 6 7
<p>huitieme</p> 1
7
<div><p>neuvieme</p> 1
3
<p lang="en">tenth</p> 1
3 5 7
</div><p>onzieme 1 </p><h1>Second titre </h1><p>douzieme</p> 1 2
b-g = background-color
1 p { b-g :pink }2 h1+p { b-g:red; }3 div>p { b-g:yellow; }4 p#special { b-g:gold; }5 p[lang=en] { b-g:green; }6 p.bleu { b-g:lightblue; }7 p+p { b-g:lightgreen; }
Universite Lille 1 Technologies du Web – CSS : les selecteurs 22
![Page 59: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/59.jpg)
Cascade Selecteurs Priorites Pseudo-
<p>zero</p> 1
<h1>Titre</h1><p>premier</p> 1 2
<p>second</p> 1
7
<p>troisieme</p> 1
7
<p lang="en">fourth </p> 1
5 7
<p class="bleu">cinquieme</p> 1
6 7
<p class="bleu">sixieme</p> 1
6 7
<p class="bleu" id="special">7eme</p> 1
4 6 7
<p>huitieme</p> 1
7
<div><p>neuvieme</p> 1 3
<p lang="en">tenth</p> 1 3
5 7
</div><p>onzieme 1 </p><h1>Second titre </h1><p>douzieme</p> 1 2
b-g = background-color
1 p { b-g :pink }2 h1+p { b-g:red; }3 div>p { b-g:yellow; }4 p#special { b-g:gold; }5 p[lang=en] { b-g:green; }6 p.bleu { b-g:lightblue; }7 p+p { b-g:lightgreen; }
Universite Lille 1 Technologies du Web – CSS : les selecteurs 22
![Page 60: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/60.jpg)
Cascade Selecteurs Priorites Pseudo-
<p>zero</p> 1
<h1>Titre</h1><p>premier</p> 1 2
<p>second</p> 1
7
<p>troisieme</p> 1
7
<p lang="en">fourth </p> 1
5 7
<p class="bleu">cinquieme</p> 1
6 7
<p class="bleu">sixieme</p> 1
6 7
<p class="bleu" id="special">7eme</p> 1 4
6 7
<p>huitieme</p> 1
7
<div><p>neuvieme</p> 1 3
<p lang="en">tenth</p> 1 3
5 7
</div><p>onzieme 1 </p><h1>Second titre </h1><p>douzieme</p> 1 2
b-g = background-color
1 p { b-g :pink }2 h1+p { b-g:red; }3 div>p { b-g:yellow; }4 p#special { b-g:gold; }5 p[lang=en] { b-g:green; }6 p.bleu { b-g:lightblue; }7 p+p { b-g:lightgreen; }
Universite Lille 1 Technologies du Web – CSS : les selecteurs 22
![Page 61: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/61.jpg)
Cascade Selecteurs Priorites Pseudo-
<p>zero</p> 1
<h1>Titre</h1><p>premier</p> 1 2
<p>second</p> 1
7
<p>troisieme</p> 1
7
<p lang="en">fourth </p> 1 5
7
<p class="bleu">cinquieme</p> 1
6 7
<p class="bleu">sixieme</p> 1
6 7
<p class="bleu" id="special">7eme</p> 1 4
6 7
<p>huitieme</p> 1
7
<div><p>neuvieme</p> 1 3
<p lang="en">tenth</p> 1 3 5
7
</div><p>onzieme 1 </p><h1>Second titre </h1><p>douzieme</p> 1 2
b-g = background-color
1 p { b-g :pink }2 h1+p { b-g:red; }3 div>p { b-g:yellow; }4 p#special { b-g:gold; }5 p[lang=en] { b-g:green; }6 p.bleu { b-g:lightblue; }7 p+p { b-g:lightgreen; }
Universite Lille 1 Technologies du Web – CSS : les selecteurs 22
![Page 62: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/62.jpg)
Cascade Selecteurs Priorites Pseudo-
<p>zero</p> 1
<h1>Titre</h1><p>premier</p> 1 2
<p>second</p> 1
7
<p>troisieme</p> 1
7
<p lang="en">fourth </p> 1 5
7
<p class="bleu">cinquieme</p> 1 6
7
<p class="bleu">sixieme</p> 1 6
7
<p class="bleu" id="special">7eme</p> 1 4 6
7
<p>huitieme</p> 1
7
<div><p>neuvieme</p> 1 3
<p lang="en">tenth</p> 1 3 5
7
</div><p>onzieme 1 </p><h1>Second titre </h1><p>douzieme</p> 1 2
b-g = background-color
1 p { b-g :pink }2 h1+p { b-g:red; }3 div>p { b-g:yellow; }4 p#special { b-g:gold; }5 p[lang=en] { b-g:green; }6 p.bleu { b-g:lightblue; }7 p+p { b-g:lightgreen; }
Universite Lille 1 Technologies du Web – CSS : les selecteurs 22
![Page 63: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/63.jpg)
Cascade Selecteurs Priorites Pseudo-
<p>zero</p> 1
<h1>Titre</h1><p>premier</p> 1 2
<p>second</p> 1 7
<p>troisieme</p> 1 7
<p lang="en">fourth </p> 1 5 7
<p class="bleu">cinquieme</p> 1 6 7
<p class="bleu">sixieme</p> 1 6 7
<p class="bleu" id="special">7eme</p> 1 4 6 7
<p>huitieme</p> 1 7
<div><p>neuvieme</p> 1 3
<p lang="en">tenth</p> 1 3 5 7
</div><p>onzieme 1 </p><h1>Second titre </h1><p>douzieme</p> 1 2
b-g = background-color
1 p { b-g :pink }2 h1+p { b-g:red; }3 div>p { b-g:yellow; }4 p#special { b-g:gold; }5 p[lang=en] { b-g:green; }6 p.bleu { b-g:lightblue; }7 p+p { b-g:lightgreen; }
Universite Lille 1 Technologies du Web – CSS : les selecteurs 22
![Page 64: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/64.jpg)
Cascade Selecteurs Priorites Pseudo-
<p>zero</p> 1
<h1>Titre</h1><p>premier</p> 1 2
<p>second</p> 1 7
<p>troisieme</p> 1 7
<p lang="en">fourth </p> 1 5 7
<p class="bleu">cinquieme</p> 1 6 7
<p class="bleu">sixieme</p> 1 6 7
<p class="bleu" id="special">7eme</p> 1 4 6 7
<p>huitieme</p> 1 7
<div><p>neuvieme</p> 1 3
<p lang="en">tenth</p> 1 3 5 7
</div><p>onzieme 1 </p><h1>Second titre </h1><p>douzieme</p> 1 2
b-g = background-color
1 p { b-g :pink }2 h1+p { b-g:red; }3 div>p { b-g:yellow; }4 p#special { b-g:gold; }5 p[lang=en] { b-g:green; }6 p.bleu { b-g:lightblue; }7 p+p { b-g:lightgreen; }
a b c1 0 0 1
2 0 0 2
3 0 0 2
4 1 0 1
5 0 1 1
6 0 1 1
7 0 0 2
Universite Lille 1 Technologies du Web – CSS : les selecteurs 22
![Page 65: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/65.jpg)
Cascade Selecteurs Priorites Pseudo-
<p>zero</p> 1
<h1>Titre</h1><p>premier</p> 1 2
<p>second</p> 1 7
<p>troisieme</p> 1 7
<p lang="en">fourth </p> 1 5 7
<p class="bleu">cinquieme</p> 1 6 7
<p class="bleu">sixieme</p> 1 6 7
<p class="bleu" id="special">7eme</p> 1 4 6 7
<p>huitieme</p> 1 7
<div><p>neuvieme</p> 1 3
<p lang="en">tenth</p> 1 3 5 7
</div><p>onzieme 1 </p><h1>Second titre </h1><p>douzieme</p> 1 2
b-g = background-color
1 p { b-g :pink }2 h1+p { b-g:red; }3 div>p { b-g:yellow; }4 p#special { b-g:gold; }5 p[lang=en] { b-g:green; }6 p.bleu { b-g:lightblue; }7 p+p { b-g:lightgreen; }
a b c1 0 0 1
2 0 0 2
3 0 0 2
4 1 0 1
5 0 1 1
6 0 1 1
7 0 0 2
4 > 6 > 5 > 7 > 3 > 2 > 1
Universite Lille 1 Technologies du Web – CSS : les selecteurs 22
![Page 66: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/66.jpg)
Cascade Selecteurs Priorites Pseudo-
<p>zero</p> 1
<h1>Titre</h1><p>premier</p>
1
2
<p>second</p> 1 7
<p>troisieme</p> 1 7
<p lang="en">fourth </p> 1 5 7
<p class="bleu">cinquieme</p> 1 6 7
<p class="bleu">sixieme</p> 1 6 7
<p class="bleu" id="special">7eme</p> 1 4 6 7
<p>huitieme</p> 1 7
<div><p>neuvieme</p> 1 3
<p lang="en">tenth</p> 1 3 5 7
</div><p>onzieme 1 </p><h1>Second titre </h1><p>douzieme</p> 1 2
b-g = background-color
1 p { b-g :pink }2 h1+p { b-g:red; }3 div>p { b-g:yellow; }4 p#special { b-g:gold; }5 p[lang=en] { b-g:green; }6 p.bleu { b-g:lightblue; }7 p+p { b-g:lightgreen; }
a b c1 0 0 1
2 0 0 2
3 0 0 2
4 1 0 1
5 0 1 1
6 0 1 1
7 0 0 2
4 > 6 > 5 > 7 > 3 > 2 > 1
Universite Lille 1 Technologies du Web – CSS : les selecteurs 22
![Page 67: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/67.jpg)
Cascade Selecteurs Priorites Pseudo-
<p>zero</p> 1
<h1>Titre</h1><p>premier</p>
1
2
<p>second</p>
1
7
<p>troisieme</p> 1 7
<p lang="en">fourth </p> 1 5 7
<p class="bleu">cinquieme</p> 1 6 7
<p class="bleu">sixieme</p> 1 6 7
<p class="bleu" id="special">7eme</p> 1 4 6 7
<p>huitieme</p> 1 7
<div><p>neuvieme</p> 1 3
<p lang="en">tenth</p> 1 3 5 7
</div><p>onzieme 1 </p><h1>Second titre </h1><p>douzieme</p> 1 2
b-g = background-color
1 p { b-g :pink }2 h1+p { b-g:red; }3 div>p { b-g:yellow; }4 p#special { b-g:gold; }5 p[lang=en] { b-g:green; }6 p.bleu { b-g:lightblue; }7 p+p { b-g:lightgreen; }
a b c1 0 0 1
2 0 0 2
3 0 0 2
4 1 0 1
5 0 1 1
6 0 1 1
7 0 0 2
4 > 6 > 5 > 7 > 3 > 2 > 1
Universite Lille 1 Technologies du Web – CSS : les selecteurs 22
![Page 68: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/68.jpg)
Cascade Selecteurs Priorites Pseudo-
<p>zero</p> 1
<h1>Titre</h1><p>premier</p>
1
2
<p>second</p>
1
7
<p>troisieme</p>
1
7
<p lang="en">fourth </p> 1 5 7
<p class="bleu">cinquieme</p> 1 6 7
<p class="bleu">sixieme</p> 1 6 7
<p class="bleu" id="special">7eme</p> 1 4 6 7
<p>huitieme</p> 1 7
<div><p>neuvieme</p> 1 3
<p lang="en">tenth</p> 1 3 5 7
</div><p>onzieme 1 </p><h1>Second titre </h1><p>douzieme</p> 1 2
b-g = background-color
1 p { b-g :pink }2 h1+p { b-g:red; }3 div>p { b-g:yellow; }4 p#special { b-g:gold; }5 p[lang=en] { b-g:green; }6 p.bleu { b-g:lightblue; }7 p+p { b-g:lightgreen; }
a b c1 0 0 1
2 0 0 2
3 0 0 2
4 1 0 1
5 0 1 1
6 0 1 1
7 0 0 2
4 > 6 > 5 > 7 > 3 > 2 > 1
Universite Lille 1 Technologies du Web – CSS : les selecteurs 22
![Page 69: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/69.jpg)
Cascade Selecteurs Priorites Pseudo-
<p>zero</p> 1
<h1>Titre</h1><p>premier</p>
1
2
<p>second</p>
1
7
<p>troisieme</p>
1
7
<p lang="en">fourth </p>
1
5
7
<p class="bleu">cinquieme</p> 1 6 7
<p class="bleu">sixieme</p> 1 6 7
<p class="bleu" id="special">7eme</p> 1 4 6 7
<p>huitieme</p> 1 7
<div><p>neuvieme</p> 1 3
<p lang="en">tenth</p> 1 3 5 7
</div><p>onzieme 1 </p><h1>Second titre </h1><p>douzieme</p> 1 2
b-g = background-color
1 p { b-g :pink }2 h1+p { b-g:red; }3 div>p { b-g:yellow; }4 p#special { b-g:gold; }5 p[lang=en] { b-g:green; }6 p.bleu { b-g:lightblue; }7 p+p { b-g:lightgreen; }
a b c1 0 0 1
2 0 0 2
3 0 0 2
4 1 0 1
5 0 1 1
6 0 1 1
7 0 0 2
4 > 6 > 5 > 7 > 3 > 2 > 1
Universite Lille 1 Technologies du Web – CSS : les selecteurs 22
![Page 70: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/70.jpg)
Cascade Selecteurs Priorites Pseudo-
<p>zero</p> 1
<h1>Titre</h1><p>premier</p>
1
2
<p>second</p>
1
7
<p>troisieme</p>
1
7
<p lang="en">fourth </p>
1
5
7
<p class="bleu">cinquieme</p>
1
6
7
<p class="bleu">sixieme</p> 1 6 7
<p class="bleu" id="special">7eme</p> 1 4 6 7
<p>huitieme</p> 1 7
<div><p>neuvieme</p> 1 3
<p lang="en">tenth</p> 1 3 5 7
</div><p>onzieme 1 </p><h1>Second titre </h1><p>douzieme</p> 1 2
b-g = background-color
1 p { b-g :pink }2 h1+p { b-g:red; }3 div>p { b-g:yellow; }4 p#special { b-g:gold; }5 p[lang=en] { b-g:green; }6 p.bleu { b-g:lightblue; }7 p+p { b-g:lightgreen; }
a b c1 0 0 1
2 0 0 2
3 0 0 2
4 1 0 1
5 0 1 1
6 0 1 1
7 0 0 2
4 > 6 > 5 > 7 > 3 > 2 > 1
Universite Lille 1 Technologies du Web – CSS : les selecteurs 22
![Page 71: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/71.jpg)
Cascade Selecteurs Priorites Pseudo-
<p>zero</p> 1
<h1>Titre</h1><p>premier</p>
1
2
<p>second</p>
1
7
<p>troisieme</p>
1
7
<p lang="en">fourth </p>
1
5
7
<p class="bleu">cinquieme</p>
1
6
7
<p class="bleu">sixieme</p>
1
6
7
<p class="bleu" id="special">7eme</p> 1 4 6 7
<p>huitieme</p> 1 7
<div><p>neuvieme</p> 1 3
<p lang="en">tenth</p> 1 3 5 7
</div><p>onzieme 1 </p><h1>Second titre </h1><p>douzieme</p> 1 2
b-g = background-color
1 p { b-g :pink }2 h1+p { b-g:red; }3 div>p { b-g:yellow; }4 p#special { b-g:gold; }5 p[lang=en] { b-g:green; }6 p.bleu { b-g:lightblue; }7 p+p { b-g:lightgreen; }
a b c1 0 0 1
2 0 0 2
3 0 0 2
4 1 0 1
5 0 1 1
6 0 1 1
7 0 0 2
4 > 6 > 5 > 7 > 3 > 2 > 1
Universite Lille 1 Technologies du Web – CSS : les selecteurs 22
![Page 72: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/72.jpg)
Cascade Selecteurs Priorites Pseudo-
<p>zero</p> 1
<h1>Titre</h1><p>premier</p>
1
2
<p>second</p>
1
7
<p>troisieme</p>
1
7
<p lang="en">fourth </p>
1
5
7
<p class="bleu">cinquieme</p>
1
6
7
<p class="bleu">sixieme</p>
1
6
7
<p class="bleu" id="special">7eme</p>
1
4
6 7
<p>huitieme</p> 1 7
<div><p>neuvieme</p> 1 3
<p lang="en">tenth</p> 1 3 5 7
</div><p>onzieme 1 </p><h1>Second titre </h1><p>douzieme</p> 1 2
b-g = background-color
1 p { b-g :pink }2 h1+p { b-g:red; }3 div>p { b-g:yellow; }4 p#special { b-g:gold; }5 p[lang=en] { b-g:green; }6 p.bleu { b-g:lightblue; }7 p+p { b-g:lightgreen; }
a b c1 0 0 1
2 0 0 2
3 0 0 2
4 1 0 1
5 0 1 1
6 0 1 1
7 0 0 2
4 > 6 > 5 > 7 > 3 > 2 > 1
Universite Lille 1 Technologies du Web – CSS : les selecteurs 22
![Page 73: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/73.jpg)
Cascade Selecteurs Priorites Pseudo-
<p>zero</p> 1
<h1>Titre</h1><p>premier</p>
1
2
<p>second</p>
1
7
<p>troisieme</p>
1
7
<p lang="en">fourth </p>
1
5
7
<p class="bleu">cinquieme</p>
1
6
7
<p class="bleu">sixieme</p>
1
6
7
<p class="bleu" id="special">7eme</p>
1
4
6 7
<p>huitieme</p>
1
7
<div><p>neuvieme</p> 1 3
<p lang="en">tenth</p> 1 3 5 7
</div><p>onzieme 1 </p><h1>Second titre </h1><p>douzieme</p> 1 2
b-g = background-color
1 p { b-g :pink }2 h1+p { b-g:red; }3 div>p { b-g:yellow; }4 p#special { b-g:gold; }5 p[lang=en] { b-g:green; }6 p.bleu { b-g:lightblue; }7 p+p { b-g:lightgreen; }
a b c1 0 0 1
2 0 0 2
3 0 0 2
4 1 0 1
5 0 1 1
6 0 1 1
7 0 0 2
4 > 6 > 5 > 7 > 3 > 2 > 1
Universite Lille 1 Technologies du Web – CSS : les selecteurs 22
![Page 74: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/74.jpg)
Cascade Selecteurs Priorites Pseudo-
<p>zero</p> 1
<h1>Titre</h1><p>premier</p>
1
2
<p>second</p>
1
7
<p>troisieme</p>
1
7
<p lang="en">fourth </p>
1
5
7
<p class="bleu">cinquieme</p>
1
6
7
<p class="bleu">sixieme</p>
1
6
7
<p class="bleu" id="special">7eme</p>
1
4
6 7
<p>huitieme</p>
1
7
<div><p>neuvieme</p>
1
3
<p lang="en">tenth</p> 1 3 5 7
</div><p>onzieme 1 </p><h1>Second titre </h1><p>douzieme</p> 1 2
b-g = background-color
1 p { b-g :pink }2 h1+p { b-g:red; }3 div>p { b-g:yellow; }4 p#special { b-g:gold; }5 p[lang=en] { b-g:green; }6 p.bleu { b-g:lightblue; }7 p+p { b-g:lightgreen; }
a b c1 0 0 1
2 0 0 2
3 0 0 2
4 1 0 1
5 0 1 1
6 0 1 1
7 0 0 2
4 > 6 > 5 > 7 > 3 > 2 > 1
Universite Lille 1 Technologies du Web – CSS : les selecteurs 22
![Page 75: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/75.jpg)
Cascade Selecteurs Priorites Pseudo-
<p>zero</p> 1
<h1>Titre</h1><p>premier</p>
1
2
<p>second</p>
1
7
<p>troisieme</p>
1
7
<p lang="en">fourth </p>
1
5
7
<p class="bleu">cinquieme</p>
1
6
7
<p class="bleu">sixieme</p>
1
6
7
<p class="bleu" id="special">7eme</p>
1
4
6 7
<p>huitieme</p>
1
7
<div><p>neuvieme</p>
1
3
<p lang="en">tenth</p>
1 3
5
7
</div><p>onzieme 1 </p><h1>Second titre </h1><p>douzieme</p> 1 2
b-g = background-color
1 p { b-g :pink }2 h1+p { b-g:red; }3 div>p { b-g:yellow; }4 p#special { b-g:gold; }5 p[lang=en] { b-g:green; }6 p.bleu { b-g:lightblue; }7 p+p { b-g:lightgreen; }
a b c1 0 0 1
2 0 0 2
3 0 0 2
4 1 0 1
5 0 1 1
6 0 1 1
7 0 0 2
4 > 6 > 5 > 7 > 3 > 2 > 1
Universite Lille 1 Technologies du Web – CSS : les selecteurs 22
![Page 76: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/76.jpg)
Cascade Selecteurs Priorites Pseudo-
<p>zero</p> 1
<h1>Titre</h1><p>premier</p>
1
2
<p>second</p>
1
7
<p>troisieme</p>
1
7
<p lang="en">fourth </p>
1
5
7
<p class="bleu">cinquieme</p>
1
6
7
<p class="bleu">sixieme</p>
1
6
7
<p class="bleu" id="special">7eme</p>
1
4
6 7
<p>huitieme</p>
1
7
<div><p>neuvieme</p>
1
3
<p lang="en">tenth</p>
1 3
5
7
</div><p>onzieme 1 </p><h1>Second titre </h1><p>douzieme</p>
1
2
b-g = background-color
1 p { b-g :pink }2 h1+p { b-g:red; }3 div>p { b-g:yellow; }4 p#special { b-g:gold; }5 p[lang=en] { b-g:green; }6 p.bleu { b-g:lightblue; }7 p+p { b-g:lightgreen; }
a b c1 0 0 1
2 0 0 2
3 0 0 2
4 1 0 1
5 0 1 1
6 0 1 1
7 0 0 2
4 > 6 > 5 > 7 > 3 > 2 > 1
ex-selecteur.html
Universite Lille 1 Technologies du Web – CSS : les selecteurs 22
![Page 77: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/77.jpg)
Cascade Selecteurs Priorites Pseudo-
heritage
Heritage
lorsque pour un element aucune regle ne definit de valeur pourune propriete, c’est la valeur de cette propriete pour son parentqui s’applique
toutes les proprietes ne s’heritent pasex : margin, padding, etcla propriete inherit permet d’agir sur l’heritage
Universite Lille 1 Technologies du Web – CSS : les selecteurs 23
![Page 78: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/78.jpg)
Cascade Selecteurs Priorites Pseudo-
au programme...
1 Cascade
2 Selecteurs
3 Priorites
4 Pseudo-
Universite Lille 1 Technologies du Web – CSS : les selecteurs 24
![Page 79: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/79.jpg)
Cascade Selecteurs Priorites Pseudo-
au programme...
1 Cascade
2 Selecteurs
3 Priorites
4 Pseudo-
Universite Lille 1 Technologies du Web – CSS : les selecteurs 25
![Page 80: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/80.jpg)
Cascade Selecteurs Priorites Pseudo-
pseudo-classes
non exhaustif
Structurelles
:empty un element E sans descendant (y compris nœud texte):first-child un element qui est premier fils d’un autre element
ex : div.exercice:first-child:last-child element dernier fils d’un autre element
:nth-child(an + b) element (an + b)-eme fils d’un autre elementex : 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)neme element du type selectionne et
qui ont le meme pere
Universite Lille 1 Technologies du Web – CSS : les selecteurs 26
![Page 81: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/81.jpg)
Cascade Selecteurs Priorites Pseudo-
pseudo-classes (suite) et pseudo-elementsnon exhaustif
Dynamiques
:hover est « sous » le pointeur de la souris:visited (<a> uniquement) lien deja visite
:link (<a> uniquement) lien non encore visite
Pseudo-elements
::first-line la premiere ligne « formatee » d’un element::first-letter le premiere lettre « formatee » d’un element
::before insertion de contenu avant l’element::after insertion de contenu apres l’element
Universite Lille 1 Technologies du Web – CSS : les selecteurs 27
![Page 82: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/82.jpg)
Cascade Selecteurs Priorites Pseudo-
exemples
:first-child
body
p divh1
em h1
h1
div
em
p
em
p
em
Credits figures Bruno Bogaert
Universite Lille 1 Technologies du Web – CSS : les selecteurs 28
![Page 83: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/83.jpg)
Cascade Selecteurs Priorites Pseudo-
exemples
:first-child
body
p divh1
em h1
h1
div
em
p
em
p
em
h1:first-child
body
p divh1
em h1
h1
div
em
p
em
p
em
Credits figures Bruno Bogaert
Universite Lille 1 Technologies du Web – CSS : les selecteurs 28
![Page 84: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/84.jpg)
Cascade Selecteurs Priorites Pseudo-
exemples
:first-child
body
p divh1
em h1
h1
div
em
p
em
p
em
h1:first-child
body
p divh1
em h1
h1
div
em
p
em
p
em
div>h1:first-child
body
p divh1
em h1
h1
div
em
p
em
p
em
Credits figures Bruno Bogaert
Universite Lille 1 Technologies du Web – CSS : les selecteurs 28
![Page 85: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/85.jpg)
Cascade Selecteurs Priorites Pseudo-
exemples
:first-child
body
p divh1
em h1
h1
div
em
p
em
p
em
h1:first-child
body
p divh1
em h1
h1
div
em
p
em
p
em
div>h1:first-child
body
p divh1
em h1
h1
div
em
p
em
p
em
h1:first-child+*
body
p divh1
em h1
h1
div
em
p
em
p
em
Credits figures Bruno Bogaert
Universite Lille 1 Technologies du Web – CSS : les selecteurs 28
![Page 86: CSS : introductionUniversit´e Lille 1 Technologies du Web – CSS : les s ´electeurs 12 Cascade S´electeurs Priorit´es Pseudo-s´electeur de classe et d’id Cas particuliers des](https://reader034.vdocuments.site/reader034/viewer/2022042807/5f8196a9978f2c442a6cb4db/html5/thumbnails/86.jpg)
Cascade Selecteurs Priorites Pseudo-
exemple
Credits figures Bruno Bogaert
Universite Lille 1 Technologies du Web – CSS : les selecteurs 29