📗 Chapitre 6 : Sélecteurs d'attributs avancés
26 Commence par [attr^="valeur"]
📖 Définition : Sélectionne les éléments dont l'attribut commence par une certaine valeur.
a[href^="https"] {
color: #2ecc71;
}
a[href^="http"] {
color: #e74c3c;
}
27 Se termine par [attr$="valeur"]
📖 Définition : Sélectionne les éléments dont l'attribut se termine par une certaine valeur.
a[href$=".pdf"] {
background: url(pdf-icon.png) no-repeat left center;
padding-left: 20px;
}
img[src$=".svg"] {
border: 2px solid #3498db;
}
28 Contient [attr*="valeur"]
📖 Définition : Sélectionne les éléments dont l'attribut contient une certaine valeur.
a[href*="google"] {
color: #4285f4;
}
a[href*="amazon"] {
color: #ff9900;
}
29 Mot exact [attr~="valeur"]
📖 Définition : Sélectionne les éléments dont l'attribut contient le mot exact (séparé par espaces).
div[class~="important"] {
background: #fdebd0;
border-left: 4px solid #e74c3c;
}
30 Commence par (tiret) [attr|="valeur"]
📖 Définition : Sélectionne les éléments dont l'attribut commence par la valeur suivie d'un tiret.
div[lang|="fr"] {
background: #d5f5e3;
border-left: 4px solid #2ecc71;
}
📘 Chapitre 7 : Pseudo-classes de lien
31 Lien non visité :link
📖 Définition : Sélectionne les liens non visités.
a:link {
color: #3498db;
text-decoration: none;
}
32 Lien visité :visited
📖 Définition : Sélectionne les liens déjà visités.
a:visited {
color: #9b59b6;
}
33 Tout lien :any-link
📖 Définition : Sélectionne tous les liens (visités ou non).
a:any-link {
font-weight: bold;
}
34 Cible d'ancrage :target
📖 Définition : Sélectionne l'élément ciblé par l'URL (ancre).
section:target {
background: #f9e79f;
border-left: 4px solid #f1c40f;
}
35 Langue :lang()
📖 Définition : Sélectionne les éléments en fonction de leur langue.
p:lang(fr) {
quotes: "«" "»";
}
p:lang(en) {
quotes: "“" "”";
}
« Bonjour le monde ! »
“Hello world!”
📙 Chapitre 8 : Pseudo-classes de formulaire
36 Valide :valid
📖 Définition : Sélectionne les champs de formulaire valides.
input:valid {
border-color: #2ecc71;
}
input:invalid {
border-color: #e74c3c;
}
Email valide :
Email invalide :
37 Invalide :invalid
📖 Définition : Sélectionne les champs de formulaire invalides.
input:invalid {
border: 2px solid #e74c3c;
background: #fdebd0;
}
38 Dans l'intervalle :in-range
📖 Définition : Sélectionne les champs numériques dont la valeur est dans l'intervalle.
input:in-range {
border-color: #2ecc71;
}
input:out-of-range {
border-color: #e74c3c;
}
Valeur entre 0 et 100 (valide - vert)
39 Hors intervalle :out-of-range
📖 Définition : Sélectionne les champs numériques dont la valeur est hors intervalle.
input:out-of-range {
border-color: #e74c3c;
background: #fdebd0;
}
Valeur 150 (hors intervalle - rouge)
40 Placeholder visible :placeholder-shown
📖 Définition : Sélectionne les champs dont le placeholder est visible (champ vide).
input:placeholder-shown {
border-color: #95a5a6;
background: #f8f9fa;
}
📒 Chapitre 9 : Pseudo-classes avancées
41 Élément vide :empty
📖 Définition : Sélectionne les éléments sans enfant (pas de texte ni d'élément).
div:empty {
background: #fdebd0;
border: 2px dashed #e74c3c;
padding: 20px;
}
42 Élément racine :root
📖 Définition : Sélectionne l'élément racine (<html>). Utile pour les variables CSS.
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
}
43 Enfant unique :only-child
📖 Définition : Sélectionne l'élément qui est l'unique enfant de son parent.
p:only-child {
background: #d5f5e3;
padding: 10px;
border-radius: 8px;
}
✓ Enfant unique (vert)
Premier enfant
Deuxième enfant
44 Premier du type :first-of-type
📖 Définition : Sélectionne le premier élément de son type parmi ses frères.
p:first-of-type {
color: #2ecc71;
font-weight: bold;
}
Titre
✓ Premier paragraphe (vert gras)
Deuxième paragraphe
45 Dernier du type :last-of-type
📖 Définition : Sélectionne le dernier élément de son type parmi ses frères.
p:last-of-type {
color: #e74c3c;
font-weight: bold;
}
Titre
Premier paragraphe
✓ Dernier paragraphe (rouge gras)
📕 Chapitre 10 : Pseudo-éléments & sélecteurs modernes
46 Puce/Numéro ::marker
📖 Définition : Style la puce ou le numéro des listes.
li::marker {
color: #e74c3c;
font-weight: bold;
}
- ● Élément 1
- ● Élément 2
- ● Élément 3
47 Fond modal ::backdrop
📖 Définition : Style l'arrière-plan des éléments en plein écran (dialog, video).
video::backdrop {
background: rgba(0,0,0,0.9);
}
Exemple: Lorsqu'une vidéo passe en plein écran, le fond devient noir.
48 Regroupement :is()
49 Regroupement sans spécificité :where()
50 Parent contenant :has()
📖 Définition : Sélectionne un élément parent qui contient un certain enfant.
figure:has(figcaption) {
border: 2px solid #3498db;
padding: 10px;
border-radius: 8px;
}
article:has(img) {
background: #f8f9fa;
}
Sans figcaption
📝 Tableau récapitulatif (Sélecteurs 26 à 50)
| # | Sélecteur | Description | Exemple |
|---|---|---|---|
| 📗 Chapitre 6 : Attributs avancés | |||
| 26 | [attr^="val"] |
Commence par | a[href^="https"] |
| 27 | [attr$="val"] |
Se termine par | a[href$=".pdf"] |
| 28 | [attr*="val"] |
Contient | a[href*="google"] |
| 29 | [attr~="val"] |
Mot exact | div[class~="important"] |
| 30 | [attr|="val"] |
Commence par (tiret) | div[lang|="fr"] |
| 📘 Chapitre 7 : Pseudo-classes de lien | |||
| 31 | :link |
Lien non visité | a:link |
| 32 | :visited |
Lien visité | a:visited |
| 33 | :any-link |
Tout lien | a:any-link |
| 34 | :target |
Cible d'ancrage | section:target |
| 35 | :lang() |
Langue | p:lang(fr) |
| 📙 Chapitre 8 : Pseudo-classes de formulaire | |||
| 36 | :valid |
Valide | input:valid |
| 37 | :invalid |
Invalide | input:invalid |
| 38 | :in-range |
Dans intervalle | input:in-range |
| 39 | :out-of-range |
Hors intervalle | input:out-of-range |
| 40 | :placeholder-shown |
Placeholder visible | input:placeholder-shown |
| 📒 Chapitre 9 : Pseudo-classes avancées | |||
| 41 | :empty |
Élément vide | div:empty |
| 42 | :root |
Élément racine | :root |
| 43 | :only-child |
Enfant unique | p:only-child |
| 44 | :first-of-type |
Premier du type | p:first-of-type |
| 45 | :last-of-type |
Dernier du type | p:last-of-type |
| 📕 Chapitre 10 : Pseudo-éléments & modernes | |||
| 46 | ::marker |
Puce/numéro de liste | li::marker |
| 47 | ::backdrop |
Fond modal plein écran | video::backdrop |
| 48 | :is() |
Regroupement (spécifique) | :is(h1, h2, h3) |
| 49 | :where() |
Regroupement (spécificité 0) | :where(.article) p |
| 50 | :has() |
Parent contenant (parent selector) | figure:has(figcaption) |