CSS Avancé

Chapitre 9 Développement Web 1
CSS avancés
Enseignante : Mme L. MANSOURI
1
Le sélecteur CSS universel « * »
Le sélecteur « * » (étoile) permet de sélectionner tous les
éléments HTML d’une page; c’est pourquoi il est appelé
sélecteur CSS universel.
Exemple:
*{
Padding: 10px;
Margin:10px;
}
2
Arbre des éléments HTML
La notion d'arbre (avec des ancêtres et des descendants)
est très utilisée dans les sélecteurs CSS.
Exemple
Le <a> à gauche est fils (descendant direct) de <h1>

Le <a> à droite est descendant (indirect) de ul.
3
Les pseudo classes :first-child et :last-child
Les pseudo classes CSS :first-child et :last-child permettent
respectivement de sélectionner le premier élément et le
dernier élément enfant HTML d’un certain type par rapport à
un élément parent.
<body>
Premier élément enfant de <div>
l'élément div
<p> un premier paragraphe</p>
<p> un 2eme paragraphe</p>
dernier élément enfant de <p> un 3eme paragraphe</p>
l'élément div <p> un 4eme paragraphe</p>
</div>
dernier élément enfant de
l'élément body <p> un autre paragraphe</p>
</body>
4
Css
p:first-child
{ Color:orange;
}
p:last-child
{ Color:green;
}
5
La pseudo classe :nth-child()
La pseudo classe CSS :nth-child() permet de cibler certains enfants
d'un élément HTML.
On indique entre les parenthèses de cette pseudo classe soit un
nombre, soit un mot clé (even , odd),
2n ,2n+1.. CSS:
/*tous les <p> qui sont des
Exemple:
enfants pairs(2eme enfant ,
<body>
4eme enfant,..) d'un élément
<h1>Titre de niveau 1</h1>
HTML dans la page*/
<h2>Titre de niveau 2</h2>
<p>Un premier paragraphe</p>
p:nth-child(even)
<p>Un deuxième paragraphe</p>
{color: red;}
<div>
<h2>Un autre titre de niveau 2</h2>
/*tous les <h2> qui sont le
<p>Un troisième paragraphe</p>
2eme enfant d'un élément
<p>Un quatrième paragraphe</p>
parent*/
</div>
h2:nth-child(2){
</body>
color: green;} 6
Titre de niveau 2 en vert
Paragraphe en rouge
7
Les pseudo éléments
Les pseudo éléments CSS permettent de modifier l’apparence
d’une partie d’un ou de plusieurs éléments HTML, ou d’ajouter
du contenu au début ou à la fin d'un certain élément HTML.
Les pseudo éléments sont reconnaissables en CSS 3 à leur
écriture , ils commencent par « :: » (un double deux-points).
Voici les principales pseudo-éléments utilisés en css:
▪ ::first-letter permet de ne sélectionner que la première lettre
d’un texte contenu dans un élément ;
▪ ::first-line permet de ne sélectionner que la première ligne d’un
texte contenu dans un élément ;
▪ ::selection permet de sélectionner la partie d’un élément
sélectionnée (par un double clic) par l’utilisateur ;
▪ ::before permet d’insérer du contenu au début d'un élément
HTML ;
▪ ::after permet d’insérer du contenu à la fin d'un élément HTML.
8
Le pseudo élément CSS ::first-letter
Le pseudo élément CSS ::first-letter permet de modifier
l’apparence de la première lettre du texte d’un élément.
On peut par exemple agrandir et changer la couleur de la
première lettre de tous nos paragraphes :
Html
CSS
<body>
<h1>Pseudo éléments CSS</h1> p::first-letter
<div> {
<p>Un premier paragraphe</p> font-size: 32px;
<p>Ceci est un deuxième paragraphe</p> font-weight:bold;
<p>Et voilà un troisième paragraphe</p> color: magenta;
</div> }
<p>Un paragraphe hors div</p>
</body>
9
Affichage
Remarque
▪ Le pseudo élément ::first-letter ne peut être appliqué qu’à des
éléments HTML de type block.
▪ ::first-letter ne supporte pas toutes les propriétés CSS mais
peut être utilisé avec les suivantes (liste non exhaustive) :
les propriétés liées à la police (font) ,celles liées à la couleur ,
celles liées au fond (background) ,border, margin, padding ,
text-decoration , text-transform ,vertical-align, line-height, float
et clear. 10
Le pseudo élément CSS ::first-line
Le pseudo élément CSS ::first-line permet de cibler et de

modifier le style de la première ligne de texte d’un élément.
Html CSS
<body> p::first-line{
<h1>Pseudo éléments CSS</h1> font-size: 30px;
<div> color: blue;
<p>Un premier paragraphe qui contient }
beaucoup de texte afin que celui-ci occupe
plusieurs lignes au sein de notre page web</p>
<p>On<br>peut<br>aussi<br>ajouter des
break...</p>
</div>
</body> 11
Affichage
Remarque
▪ Le pseudo élément ::first-line ne peut être appliqué qu’à des
éléments HTML de type block.
▪ ::first-line ne supporte pas toutes les propriétés CSS mais
peut être utilisé avec les suivantes (liste non exhaustive) :
les propriétés liées à la police (font) ,celles liées à la couleur ,
celles liées au fond (background), border, letter-spacing ,
word-spacing, text-decoration, text-transform, vertical-align,
line-height et clear. 12
Le pseudo élément CSS ::selection
Le pseudo élément CSS ::selection permet de cibler et de
mettre en forme la partie d’un élément actuellement
sélectionnée (double cliquée ou sélectionnée directement avec le
pointeur de la souris) par un utilisateur.
Ce pseudo élément supporte les propriétés color et background
ainsi que text-decoration, cursor et outline.
Html CSS
p::selection{
<body>
background-color:
<h1>Pseudo éléments CSS</h1>
orange;
<div>
}
<p>Un premier paragraphe </p>
Pour mozzila:
<p>Un autre paragraphe</p>
p::-moz-selection
</div>
</body> 13
Affichage
Partie sélectionnée par la souris
14
Les pseudos élément ::before et ::after
Les pseudo éléments CSS ::before et ::after vont nous

permettre respectivement d’ajouter du contenu HTML au début
et à la fin d'un certain élément HTML.
CSS
Html
div::before{
<body> font-weight:bold;
<h1>Pseudo éléments CSS</h1> color:red;
<div> content: "Du texte ajouté
<p>Un premier paragraphe </p> avant mon div, avec ::before";
<p>Un autre paragraphe</p> }
</div> div::after{
<p>Un paragraphe hors div</p> content:url(paragraphe.jpg);
</body> }
15
Affichage
16
Les Combinateurs
Combinateur de descendance
Les combinateurs de descendance expriment une relation de
type héritage.
• Un sélecteur de la forme "A B" représente un élément B qui
est un descendant quelconque d'un élément ancêtre A.
Exemple :
17
Exemple 2
Quel(s) élément(s) correspondent aux sélecteurs suivants?

1. li a
2. #grostitre a
3. img p
4. .auth p img
18
• On peut aussi composer des sélecteurs en les accolant
AB (pas d'espace) , ce que veut dire les éléments A qui
appartiennent à B. (B est class ou id)
Exemple :
supposons qu'on a des types d'éléments (des "p" des "h1" ...)
ayant tous une même classe "actu". On veut sélectionner
uniquement les paragraphes ayant la classe "actu".
html
<h1 class="actu">Mon titre qui suit la classe actu</h1>
<p class="actu">
<strong class="actu">titre strong qui suit la classe actu
</strong> <br />
<em class="actu">Mon titre em qui suit la classe actu
</em> <br />
<em>Mon titre em</em>
</p>
19
CSS
<h1 class="actu"> .actu

Mon titre qui suit la classe actu {color:red}
</h1> p.actu
<p class="actu">
<strong class="actu"> {color:green}
titre strong qui suit la classe actu
Tous les p qui appartiennent à .actu
</strong> <br />
<em class="actu"> affichage
Mon titre em qui suit la classe actu
</em> <br />
<em>Mon titre em</em>
En rouge
</p>
En vert
20
CSS
<h1 class="actu"> .actu

Mon titre qui suit la classe actu {color:red}
</h1> p .actu
<p class="actu">
<strong class="actu"> {color:green}
titre strong qui suit la classe actu Tous les éléments .actu qui sont des
</strong> <br /> descendants de p
<em class="actu"> affichage
Mon titre em qui suit la classe
actu </em> <br />
<em>Mon titre em</em> En rouge
</p>
En vert
Autre exemple : p.actu em { color: magenta;}

tous les em qui sont des descendants d'un p qui appartient à .actu
21
• Un sélecteur de la forme "A * B" représente un
élément B qui est le petit-fils ou un descendant ultérieur
d'un élément A.
Exemple:
div * p
représente un élément p qui est le petit-fils ou un
descendant ultérieur d'un élément div.
22
Combinateur filial
Un combinateur filial décrit une relation de filiation entre deux

éléments. Un combinateur filial est composé du caractère ">"
et sépare deux séquences de sélecteurs simples.
Exemples :
• body > p
un élément p qui est le fils de body
• div ol>li p
un élément p qui est le descendant d'un li ; l'élément li doit
être le fils d'un élément ol ; l'élément ol doit être le
descendant d'un div.
23
Combinateurs d'adjacence directe
Les combinateurs d'adjacence directe sont composés du caractère
"+" séparant deux séquences de sélecteurs simples. Il permet de
sélectionner tous les éléments B de même niveau et suivant
immédiatement les éléments A.
Exemples :
• div + p
représente un élément p suivant immédiatement un élément div

• h1.haut + h2
il ajoute une contrainte à l'élément h1 qui doit avoir class="haut"
24
Combinateurs d'adjacence indirecte
Ce combinateur cible un élément B précédé par un élément A.
Contrairement au combinateur adjacent où seul le premier frère
est ciblé, ici, tous les frères sont concernés.
A~B
{
…
}
Exemple :
p ~ span { color: red; }
<span>Ici, ce n'est pas
rouge.</span>
Ici, ce n'est pas rouge.
<p>Voici un paragraphe.</p>
Voici un paragraphe.
<code>Un peu de code.</code>
Un peu de code. Et un autre span. Encore du code c'est rouge
<span>Et un autre span.</span>
<code>Encore du code</code>
<span>c'est rouge </span>
25
sélecteurs avec des attributs
Le CSS permet de sélectionner un élément HTML selon le fait
qu’il possède ou non un attribut et selon la valeur de l’attribut.
• Le sélecteur « A[attribut] »: permet de sélectionner tous
les éléments A possédant un attribut en particulier.
• Le sélecteur CSS « A[attribut="valeur"] » va sélectionner
tous les éléments A possédant un attribut en particulier
avec une valeur précise.
• Le sélecteur CSS « A[attribut^="valeur"] » va sélectionner
tous les éléments A possédant un attribut qui commence
par une valeur précise.
• Le sélecteur CSS « A[attribut$="valeur"] » va sélectionner
tous les éléments A possédant un attribut qui finit par une
valeur précise.
• Le sélecteur CSS « A[attribut*="valeur"] » va sélectionner
tous les éléments A possédant un attribut qui contient une
26
valeur précise.
Pour Résumer
 Sélecteur universel (sélectionne tous les éléments) : *
 Appliquer un style aux élément A et B :
A, B { propriété: valeur; }
 Sélectionner un élément B contenu dans A (tous les descendants):
A B { propriété: valeur; }
• Sélectionner les éléments B fils d’un élément A :
A > B { propriété: valeur; }
• Sélectionner le premier élément B suivant un élément A :
A + B { propriété: valeur; }
• cible un élément B précédé par un élément A
A ~ B{ propriété: valeur; }
 Sélectionner tous les éléments C possédant un attribut en particulier :

C[attribut] { propriété: valeur; }
 Sélectionner tous les éléments D possédant un attribut en particulier et

une valeur exactement :
D[attribut=" valeur "] { propriété: valeur; }
27
Priorité des sélecteurs
 Les éléments en HTML « héritent » des styles de leurs

parents. D’où le « cascading » de CSS.
 En cas de conflit, le style le plus proche de l’élément en

question sera appliqué.
28
La priorité des sélecteurs CSS est la suivante (du plus
important au moins important) :
 Une déclaration de style "en ligne" (dans le code HTML

avec l'attribut style) est toujours prioritaire sur tout le
reste ;
 Le sélecteur d'identifiant #
 Les sélecteurs faisant référence à des attributs d'éléments
HTML (sélecteurs de classe . et les pseudo classes
 Le nom des éléments (p, div, strong, etc.) et les pseudo
éléments
29
exemple
<p id="content" class="alert">Ceci est un message

important que je veux afficher en rouge !</p>
CSS
#content{ color : red;
text-align : center;}
.alert{ color : green; }
30
Remarque: !important
 La déclaration !important a été introduite par CSS

dans le but d’outrepasser volontairement la priorité
conférée par défaut aux modes de déclaration que sont
les feuilles de styles auteur et utilisateur. Dans la
pratique, une déclaration suivie du mot-clé !important
devient prioritaire quel que soit le poids du sélecteur
qui l’accompagne : les styles marqués ainsi écrasent tous
les styles similaires antérieurs.
 Exemple :
.premier{background-color:red !important;}
#dernier{background-color:green;}
<h1 class=premier id="dernier"> titre niveau 1 </h1>
31

CSS Avancé

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

CSS Avancé

Transféré par

Droits d'auteur :

Formats disponibles

Chapitre 9 Développement Web 1

Enseignante : Mme L. MANSOURI

Le <a> à gauche est fils (descendant direct) de <h1>

Le pseudo élément CSS ::first-line permet de cibler et de

Partie sélectionnée par la souris

Les pseudo éléments CSS ::before et ::after vont nous

Quel(s) élément(s) correspondent aux sélecteurs suivants?

<h1 class="actu"> .actu

<h1 class="actu"> .actu

Autre exemple : p.actu em { color: magenta;}

Un combinateur filial décrit une relation de filiation entre deux

représente un élément p suivant immédiatement un élément div

 Sélectionner tous les éléments C possédant un attribut en particulier :

 Sélectionner tous les éléments D possédant un attribut en particulier et

 Les éléments en HTML « héritent » des styles de leurs

 En cas de conflit, le style le plus proche de l’élément en

 Une déclaration de style "en ligne" (dans le code HTML

<p id="content" class="alert">Ceci est un message

 La déclaration !important a été introduite par CSS

Vous aimerez peut-être aussi