Chargement...
Référence complète des sélecteurs CSS
Ce guide fournit une référence complète des sélecteurs CSS, destinée aux développeurs souhaitant maîtriser toutes les options disponibles pour cibler et styliser des éléments HTML. Il permet d’identifier rapidement le sélecteur approprié, de comprendre sa syntaxe, son usage pratique et sa compatibilité avec les navigateurs. Organisé par catégories — sélecteurs de base, combinateurs, attributs, pseudo-classes, pseudo-éléments, sélecteurs avancés et media queries — ce guide facilite la consultation rapide et l’application efficace dans tout projet CSS, du simple site web aux applications complexes.
📊 Basic Selectors
| Sélecteur | Syntaxe | Description | Exemple | Compatibilité |
|---|---|---|---|---|
| * | * | Sélecteur universel – sélectionne tous les éléments | * { margin: 0; } | Tous navigateurs |
| element | tagname | Sélecteur de type – sélectionne tous les éléments spécifiés | p { color: blue; } | Tous navigateurs |
| .class | .classname | Sélecteur de classe – sélectionne les éléments avec la classe spécifiée | .highlight { background: yellow; } | Tous navigateurs |
| \#id | #idname | Sélecteur d’ID – sélectionne l’élément avec l’ID spécifié | #header { width: 100%; } | Tous navigateurs |
📊 Combinator Selectors
| Sélecteur | Syntaxe | Description | Exemple | Compatibilité |
|---|---|---|---|---|
| descendant | A B | Sélecteur descendant – sélectionne B à l’intérieur de A | div p { margin: 10px; } | Tous navigateurs |
| child | A > B | Sélecteur enfant – sélectionne B enfant direct de A | ul > li { list-style: none; } | IE7+ |
| adjacent sibling | A + B | Sélecteur frère adjacent – sélectionne B immédiatement après A | h1 + p { font-weight: bold; } | IE7+ |
| general sibling | A \~ B | Sélecteur frère général – sélectionne tous les B après A | h1 \~ p { color: gray; } | IE7+ |
📊 Attribute Selectors
| Sélecteur | Syntaxe | Description | Exemple | Compatibilité |
|---|---|---|---|---|
| \[attribute] | \[attr] | Sélectionne les éléments possédant l’attribut spécifié | \[disabled] { opacity: 0.5; } | IE7+ |
| \[attribute=value] | \[attr=val] | Sélectionne les éléments dont l’attribut est égal à la valeur | \[type="text"] { border: 1px solid; } | IE7+ |
| \[attribute\~=value] | \[attr\~=val] | Sélectionne les éléments dont l’attribut contient la valeur comme mot | \[class\~="button"] { cursor: pointer; } | IE7+ |
| \[attribute^=value] | \[attr^=val] | Sélectionne les éléments dont l’attribut commence par la valeur | \[href^="https"] { color: green; } | IE7+ |
| \[attribute\$=value] | \[attr\$=val] | Sélectionne les éléments dont l’attribut se termine par la valeur | \[src\$=".jpg"] { border: 2px solid; } | IE7+ |
| \[attribute*=value] | \[attr*=val] | Sélectionne les éléments dont l’attribut contient la valeur | \[title*="important"] { font-weight: bold; } | IE7+ |
| \[attribute="value" i] | \[attr="val" i] | Correspondance insensible à la casse | \[type="EMAIL" i] { text-transform: lowercase; } | Navigateurs modernes |
📊 Pseudo-class Selectors - Structural
| Sélecteur | Syntaxe | Description | Exemple | Compatibilité |
|---|---|---|---|---|
| :first-child | :first-child | Sélectionne le premier enfant | p:first-child { margin-top: 0; } | IE7+ |
| :last-child | :last-child | Sélectionne le dernier enfant | p:last-child { margin-bottom: 0; } | IE9+ |
| :nth-child(n) | :nth-child(n) | Sélectionne le nième enfant | tr:nth-child(2n) { background: #f0f0f0; } | IE9+ |
| :nth-last-child(n) | :nth-last-child(n) | Sélectionne le nième enfant depuis la fin | li:nth-last-child(2) { color: red; } | IE9+ |
| :nth-of-type(n) | :nth-of-type(n) | Sélectionne le nième élément de son type | h2:nth-of-type(odd) { color: blue; } | IE9+ |
| :nth-last-of-type(n) | :nth-last-of-type(n) | Sélectionne le nième élément de son type depuis la fin | p:nth-last-of-type(1) { font-weight: bold; } | IE9+ |
| :first-of-type | :first-of-type | Sélectionne le premier élément de son type | img:first-of-type { float: left; } | IE9+ |
| :last-of-type | :last-of-type | Sélectionne le dernier élément de son type | p:last-of-type { margin-bottom: 20px; } | IE9+ |
| :only-child | :only-child | Sélectionne l’enfant unique | p:only-child { text-align: center; } | IE9+ |
| :only-of-type | :only-of-type | Sélectionne l’élément unique de son type | img:only-of-type { display: block; } | IE9+ |
| :empty | :empty | Sélectionne les éléments sans enfants | div:empty { display: none; } | IE9+ |
📊 Pseudo-class Selectors - User Action
| Sélecteur | Syntaxe | Description | Exemple | Compatibilité |
|---|---|---|---|---|
| :hover | :hover | Sélectionne l’élément au survol | a:hover { color: red; } | Tous navigateurs |
| :active | :active | Sélectionne l’élément activé | button:active { transform: scale(0.95); } | Tous navigateurs |
| :focus | :focus | Sélectionne l’élément ayant le focus clavier | input:focus { outline: 2px solid blue; } | Tous navigateurs |
| :focus-visible | :focus-visible | Sélectionne l’élément avec focus visible | button:focus-visible { outline: 2px solid; } | Navigateurs modernes |
| :focus-within | :focus-within | Sélectionne l’élément contenant le focus | form:focus-within { border: 1px solid blue; } | Navigateurs modernes |
📊 Pseudo-class Selectors - Form States
| Sélecteur | Syntaxe | Description | Exemple | Compatibilité |
|---|---|---|---|---|
| :enabled | :enabled | Éléments de formulaire activés | input:enabled { background: white; } | IE9+ |
| :disabled | :disabled | Éléments de formulaire désactivés | input:disabled { background: #f5f5f5; } | IE9+ |
| :checked | :checked | Cases à cocher ou radio sélectionnées | input:checked + label { font-weight: bold; } | IE9+ |
| :indeterminate | :indeterminate | Cases à cocher indéterminées | input:indeterminate { opacity: 0.5; } | IE9+ |
| :valid | :valid | Éléments valides | input:valid { border-color: green; } | IE10+ |
| :invalid | :invalid | Éléments invalides | input:invalid { border-color: red; } | IE10+ |
| :required | :required | Éléments requis | input:required { border-left: 3px solid red; } | IE10+ |
| :optional | :optional | Éléments optionnels | input:optional { border-left: 3px solid gray; } | IE10+ |
| :read-only | :read-only | Éléments en lecture seule | input:read-only { background: #f9f9f9; } | Navigateurs modernes |
| :read-write | :read-write | Éléments éditables | input:read-write { background: white; } | Navigateurs modernes |
| :placeholder-shown | :placeholder-shown | Éléments affichant un placeholder | input:placeholder-shown { font-style: italic; } | Navigateurs modernes |
| :in-range | :in-range | Éléments avec valeur dans la plage | input:in-range { border-color: green; } | Navigateurs modernes |
| :out-of-range | :out-of-range | Éléments avec valeur hors plage | input:out-of-range { border-color: red; } | Navigateurs modernes |
📊 Pseudo-class Selectors - Link States
| Sélecteur | Syntaxe | Description | Exemple | Compatibilité |
|---|---|---|---|---|
| :link | :link | Liens non visités | a:link { color: blue; } | Tous navigateurs |
| :visited | :visited | Liens visités | a:visited { color: purple; } | Tous navigateurs |
| :any-link | :any-link | Tous les liens | a:any-link { text-decoration: underline; } | Navigateurs modernes |
| :target | :target | Élément cible de l’URL | :target { background: yellow; } | IE9+ |
📊 Pseudo-class Selectors - Logical
| Sélecteur | Syntaxe | Description | Exemple | Compatibilité |
|---|---|---|---|---|
| :not(selector) | :not(sel) | Éléments ne correspondant pas au sélecteur | p:not(.special) { color: gray; } | IE9+ |
| :is(selector) | :is(sel1, sel2) | Éléments correspondant à n’importe quel sélecteur | :is(h1, h2, h3) { margin-top: 0; } | Navigateurs modernes |
| :where(selector) | :where(sel1, sel2) | Comme :is mais avec spécificité 0 | :where(h1, h2) { color: blue; } | Navigateurs modernes |
| :has(selector) | :has(sel) | Éléments contenant le sélecteur | div:has(img) { border: 1px solid; } | Navigateurs modernes |
📊 Pseudo-element Selectors
| Sélecteur | Syntaxe | Description | Exemple | Compatibilité |
|---|---|---|---|---|
| ::before | ::before | Insère du contenu avant l’élément | p::before { content: "→ "; } | IE9+ (single colon IE8+) |
| ::after | ::after | Insère du contenu après l’élément | p::after { content: " ←"; } | IE9+ (single colon IE8+) |
| ::first-line | ::first-line | Sélectionne la première ligne de texte | p::first-line { font-weight: bold; } | IE9+ (single colon IE6+) |
| ::first-letter | ::first-letter | Sélectionne la première lettre | p::first-letter { font-size: 2em; } | IE9+ (single colon IE6+) |
| ::selection | ::selection | Texte sélectionné par l’utilisateur | ::selection { background: yellow; } | IE9+ |
| ::placeholder | ::placeholder | Texte du placeholder | input::placeholder { color: #999; } | Navigateurs modernes |
| ::backdrop | ::backdrop | Arrière-plan d’un élément plein écran | dialog::backdrop { background: rgba(0,0,0,0.5); } | Navigateurs modernes |
| ::marker | ::marker | Marqueurs de liste | li::marker { color: red; } | Navigateurs modernes |
📊 Advanced Selectors
| Sélecteur | Syntaxe | Description | Exemple | Compatibilité |
|---|---|---|---|---|
| :scope | :scope | Élément de scope | :scope > p { margin: 0; } | Navigateurs modernes |
| :defined | :defined | Éléments personnalisés définis | custom-element:defined { opacity: 1; } | Navigateurs modernes |
| :host | :host | Hôte du Shadow DOM | :host { display: block; } | Navigateurs modernes |
| :host(selector) | :host(sel) | Hôte correspondant au sélecteur | :host(.active) { color: red; } | Navigateurs modernes |
| :host-context(selector) | :host-context(sel) | Hôte dans un contexte spécifique | :host-context(.dark) { color: white; } | Navigateurs modernes |
| ::slotted(selector) | ::slotted(sel) | Contenu des slots | ::slotted(p) { margin: 0; } | Navigateurs modernes |
📊 Media Query Selectors
| Sélecteur | Syntaxe | Description | Exemple | Compatibilité |
|---|---|---|---|---|
| @media | @media (condition) | Applique des styles selon les conditions médias | @media (max-width: 768px) { .nav { display: none; } } | IE9+ |
| @supports | @supports (property: value) | Applique des styles si la propriété est supportée | @supports (display: grid) { .layout { display: grid; } } | Navigateurs modernes |
| @container | @container (condition) | Applique des styles selon la taille du conteneur | @container (min-width: 400px) { .card { flex-direction: row; } } | Navigateurs modernes |
Quick Examples
css
CSS Code
/* Sélecteurs de base combinés */
.header nav ul li a:hover {
color: #007bff;
text-decoration: none;
}
/* Sélecteurs d'attributs pour formulaires */
input\[type="email"]:focus:valid {
border-color: green;
box-shadow: 0 0 5px rgba(0,255,0,0.3);
}
/* Pseudo-éléments pour style amélioré */
.quote::before {
content: "“";
font-size: 2em;
color: #999;
}
/* Sélecteurs structurels avancés */
.grid-item:nth-child(3n+1) {
margin-left: 0;
}
/* Sélecteurs logiques modernes */
:is(h1, h2, h3):not(.no-margin) {
margin-top: 2rem;
}Bonnes pratiques et conseils :
Utilisez des sélecteurs spécifiques pour éviter les conflits de style. Préférez les classes aux IDs pour la réutilisabilité. Combinez les sélecteurs efficacement afin de réduire la taille du CSS. Testez les pseudo-classes sur différents navigateurs pour assurer la compatibilité. L’utilisation de :not() peut affecter la performance, employez-le avec précaution. Les pseudo-éléments créent des éléments virtuels, n’existant pas dans le DOM. Vérifiez la spécificité lors de combinaisons complexes. Les sélecteurs d’attributs sont utiles pour les formulaires dynamiques. Testez les nouveaux sélecteurs (:has(), :is()) pour compatibilité. Groupez les sélecteurs liés pour une meilleure organisation. Les sélecteurs descendants doivent être utilisés avec modération pour éviter une trop grande profondeur. Certaines pseudo-classes ne s’appliquent qu’à certains éléments, respectez ces limites pour un rendu correct.
🧠 Testez Vos Connaissances
Prêt à Commencer
Reference Knowledge Check
Testez vos connaissances sur les sélecteurs CSS et leur utilisation.
3
Questions
70%
Pour Réussir
∞
Temps
∞
Tentatives
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut