Quand une page HTML est téléchargée par le navigateur, elle est parsée puis interprétée sous la forme d’un arbre dans lequel élément et contenu sont représentés par un nœud.
Cet arbre est le Document Object Model [1] (abbrégé DOM).
Applique le style à tous les élements correspondant au type
nom_d_element {
/* propriétés CSS */
}<style>
p {
color: red;
}
</style>
<h1>Titre</h1>
<p>Paragraphe</p>
<section>
<h2>Titre 2</h2>
<p>Paragraphe 2</p>
</section>
Avantage : il permet de sélectionner des éléments sans avoir à modifier le code HTML Inconvénient : le style n’est pas forcément modulaire quand on change le type de l’élément. Dans ce cas, il vaut mieux décorréler le style de l’élément en utilisant une classe CSS. |
Sélectionner tous les éléments portant un attribut class dont la valeur correspond à la directive CSS.
.nom_de_classe {
/* propriétés CSS */
}<style>
.red {
color: red;
}
</style>
<h1>Titre</h1>
<p class="red">
Paragraphe
</p>
<section>
<h2 class="red">Titre 2</h2>
<p>
Paragraphe 2
</p>
</section>
Les classes permettent de sélectionner des éléments indistinctement de leur type. Augmentant ainsi la portabilité et la maintenabilité du style. |
Applique le style à l’élément dont l’identifiant porte la valeur
#nom_de_l_id {
/* propriétés CSS */
}<style>
#titre_principal {
color: red;
}
</style>
<h1 id="titre_principal">Titre</h1>
<p>Paragraphe</p>
<section>
<h2>Titre 2</h2>
<p>Paragraphe 2</p>
</section>
Avantage : il permet de sélectionner un élément unique indistinctement du type de l’élément Inconvénient : le style ne peut pas être réutilisé car l’id est unique. Préférer les |
* sélecteur universelApplique le style aux élements dont un attribut correspond à la valeur [1]
{sélecteur}[{nom_d_attribut}{opérateur}"{valeur}"]{
propriétés CSS
}body {
padding: 2rem;
}
/*
Pour les éléments qui possèdent
un attribut "titre"
*/
[title] {
color: red;
}
/*
Pour les images dont l'attribut
"alt" n'est pas présent.
Entoure de pointillés rouges
*/
img:not([alt]) {
outline: 2px dashed red;
outline-offset: 1rem;
border-radius: 2rem;
}
/*
Pour les liens dont l'attribut
"href" commence par "http://"
ou "https://".
Ajoute un émoji 🔗 après les liens externes
*/
:is(a[href^="https://"],a[href^="http://"])::after {
content: " 🔗"
}
/*
Ajoute un émoji ⚠️avant les
liens externes en HTTP
*/
a[href^="http://"]::before {
content: "⚠️ "
}
/*
Ajoute un émoji 🔐avant les
liens externes en HTTPS
*/
a[href^="https://"]::before {
content: "🔐 "
}
.dark {
padding: 3rem;
background-color: black;
}
/*
Pour les images dont le nom
de fichier termine par ".png".
Ajoute un arrière-plan clair
pour être sûr que les dessins
en noir sur transparence sont
bien lisibles */
img[src$=".png"] {
background-color: honeydew;
}<h1>Titre</h1>
<p title="Premier paragraphe">
Premier paragraphe.
</p>
<img src="https://placehold.co/100"/>
<ul>
<li>
<a href="#un_lien_de_page">
Lien de page
</a>
</li>
<li>
<a href="http://lien_externe.com">
Lien externe non sécurisé
</a>
</li>
<li>
<a href="https://lien_externe.com">
Lien externe sécurisé
</a>
</li>
</ul>
<div class="dark">
<img
src="assets/chicken-159496_120.png"
alt="Une poulet et ses poussins">
</div>
Souvent très pratique pour styler des liens, images, ou champs de saisie selon leurs attributs. |
Voir la documentation MDN pour l’ensemble des opérateurs possibles
descendants : " " (espace)
enfants : >
voisins globaux : ~
voisin direct : +
Les combinateurs ne permettent que de sélectionner des éléments enfants (pas parents) et voisins suivants (pas précédents).
Cependant, on peut contourner cette limitation avec la pseudo-classe |
descendants : " " (espace)
enfants : >
voisins globaux : ~
voisin direct : +
section header > h1 ~ p {
color: blue;
}<section>
<header>
<img src="#" alt="image" />
<h1>Titre de la carte</h1>
<p>paragraphe 1</p>
<blockquote>Citation</blockquote>
<p>paragraphe 2</p>
</header>
<p>paragraphe 3</p>
</section>:hover<style>
button:hover{
background:limegreen;
}
</style>
<button>Bouton</button>
:visited<style>
a:visited{
color:darkred;
}
</style>
<a href="https://developer.mozilla.org">
Documentation Mozilla
</a>
:has():has():has() pour ajouter une étoile rouge à un label quand le chaps de saisie qui le suit est requis.<style>
label {
display: block;
}
label:has(+ input:required)::after {
content: " * ";
color: red;
}
</style>
<label for="answer">Réponse</label>
<input id="answer" type="text" name="answer" required>
<label for="comment">Commentaire</label>
<input id="comment" type="text" name="comment">
:has()<style>
section{
border: 1px solid grey ;
border-radius: 1rem;
padding: 1rem;
}
section:has( input:invalid){
background-color: pink;
border-color: red;
}
</style>
<section>
<form>
<label for="answer">Réponse</label>
<input
id="answer"
type="text"
name="answer"
required >
</form>
</section>
:not():is():rootUn pseudo-élément CSS [1] est un mot-clé ajouté à un sélecteur qui vous permet de mettre en forme une partie spécifique du ou des éléments sélectionnés.
sélecteur::pseudo-élément {
propriété: valeur;
}<style>
/* La première ligne de chaque élément <p>. */
p::first-line {
color: blue;
text-transform: uppercase;
}
</style>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut dui ut mauris feugiat venenatis. Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Donec posuere a diam eu consectetur. Cras pharetra elit a magna porttitor
finibus. Pellentesque rhoncus id lorem in lacinia. Orci varius natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Maecenas dignissim faucibus ullamcorper. Vestibulum condimentum lorem id scelerisque
tincidunt. Fusce quis ultricies risus, id imperdiet erat. Nunc vel ligula bibendum, condimentum libero sit amet,
congue odio. Pellentesque euismod egestas elementum. Integer et dignissim nisi.
</p>
<p>
Aliquam erat volutpat. Nunc fermentum mauris eget diam tristique porttitor. Vestibulum sit amet eros sed mauris
tempor pharetra vitae in magna. Donec magna erat, feugiat nec feugiat non, pellentesque aliquam turpis. Aliquam
turpis nisl, feugiat maximus tincidunt ac, suscipit id est. In convallis eu felis a eleifend. Vivamus euismod
fermentum leo, cursus condimentum tortor viverra vitae. Pellentesque viverra sem tristique tincidunt feugiat.
Praesent efficitur aliquam facilisis.
</p>
::beforeLe pseudo-élément CSS
::before[1] crée un pseudo-élément qui sera le premier enfant de l’élément ciblé. Généralement utilisé pour ajouter du contenu esthétique à un élément via la propriété CSS content. Par défaut, l’élément créé est de type en-ligne (inline en anglais).
<style>
a[hreflang="fr"]::before{
content:" 🇫🇷"
}
</style>
<a href="https://wikipedia.fr" hreflang="fr">Wikipédia France</a>
::afterLe pseudo-élément CSS
::after[1] crée un pseudo-élément qui sera le dernier enfant de l’élément ciblé. Généralement utilisé pour ajouter du contenu esthétique à un élément via la propriété CSS content. Par défaut, l’élément créé est de type en-ligne (inline en anglais).
<style>
/*
Pour les liens dont l'attribut "href" commence par "http://" ou "https://".
Ajoute un émoji 🔗 après les liens externes
*/
:is( a[href^="https://"], a[href^="http://"] )::after {
content: " 🔗"
}
</style>
<ul>
<li><a href="#un_lien_de_page"> Lien de page </a></li>
<li><a href="http://lien_externe.com"> Lien externe non sécurisé </a></li>
<li><a href="https://lien_externe.com"> Lien externe sécurisé </a></li>
</ul>
::first-letterLe pseudo-élément CSS
::first-letter[1] sélectionne la première lettre de la première ligne d’un bloc, si elle n’est pas précédée par un quelconque autre contenu (comme une image ou un tableau en ligne) sur sa ligne.
<style>
p::first-letter {
font-size: 4em
}
</style>
<p>Il était une fois, un petit chaperon rouge.</p>
<p>Fin</p>
::first-lineLe pseudo-élément CSS
::first-line[1] applique la décoration à la première ligne d’un élément. La quantité de texte sur la première ligne dépend de nombreux facteurs, comme la largeur des éléments ou du document, mais aussi de la taille du texte.
<style>
/* La première ligne de chaque élément <p>. */
p::first-line {
color: blue;
text-transform: uppercase;
}
</style>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut dui ut mauris feugiat venenatis. Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Donec posuere a diam eu consectetur. Cras pharetra elit a magna porttitor
finibus. Pellentesque rhoncus id lorem in lacinia. Orci varius natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Maecenas dignissim faucibus ullamcorper. Vestibulum condimentum lorem id scelerisque
tincidunt. Fusce quis ultricies risus, id imperdiet erat. Nunc vel ligula bibendum, condimentum libero sit amet,
congue odio. Pellentesque euismod egestas elementum. Integer et dignissim nisi.
</p>
<p>
Aliquam erat volutpat. Nunc fermentum mauris eget diam tristique porttitor. Vestibulum sit amet eros sed mauris
tempor pharetra vitae in magna. Donec magna erat, feugiat nec feugiat non, pellentesque aliquam turpis. Aliquam
turpis nisl, feugiat maximus tincidunt ac, suscipit id est. In convallis eu felis a eleifend. Vivamus euismod
fermentum leo, cursus condimentum tortor viverra vitae. Pellentesque viverra sem tristique tincidunt feugiat.
Praesent efficitur aliquam facilisis.
</p>