css3

📖 Définition : Sélectionne le n-ième élément d'un type spécifique parmi ses frères.

p:nth-of-type(2) {
    background: #fdebd0;
    padding: 5px;
    border-radius: 4px;
}

📖 Définition : Sélectionne le n-ième élément en partant de la fin.

p:nth-last-of-type(2) {
    background: #d5f5e3;
    padding: 5px;
    border-radius: 4px;
}

📖 Définition : Sélectionne le n-ième enfant en partant de la fin, quel que soit son type.

li:nth-last-child(2) {
    background: #f9e79f;
    padding: 5px;
}

📖 Définition : Sélectionne l'élément qui est le seul de son type parmi ses frères.

p:only-of-type {
    background: #d4f1f9;
    padding: 10px;
    border-radius: 8px;
}

📖 Définition : Regroupe plusieurs sélecteurs. Utile pour réduire la répétition.

:is(header, main, footer) p {
    color: #2c3e66;
    font-weight: 500;
}

📖 Définition : Sélectionne les champs de formulaire activés (par défaut).

input:enabled {
    background: white;
    border-color: #2ecc71;
}
input:disabled {
    background: #ecf0f1;
}

📖 Définition : Sélectionne les champs en lecture seule (non modifiables).

input:read-only {
    background: #f8f9fa;
    border: 1px dashed #95a5a6;
}

📖 Définition : Sélectionne les champs modifiables par l'utilisateur.

input:read-write {
    border: 2px solid #3498db;
}

📖 Définition : Sélectionne le bouton par défaut dans un groupe.

input:default {
    box-shadow: 0 0 0 2px #3498db;
}

📖 Définition : Sélectionne les cases à cocher dans un état indéterminé.

input:indeterminate {
    outline: 2px solid #f39c12;
}

📖 Définition : Représente l'élément qui sert de portée/référence pour les sélecteurs.

.parent :scope {
    border-left: 3px solid #3498db;
}

📖 Définition : Sélectionne l'élément hôte d'un Web Component (Shadow DOM).

:host {
    display: block;
    background: #f8f9fa;
    padding: 10px;
}

📖 Définition : Sélectionne l'élément hôte en fonction du contexte parent.

:host-context(.dark-theme) {
    background: #2c3e66;
    color: white;
}

📖 Définition : Style les éléments distribués dans un slot d'un Web Component.

::slotted(p) {
    color: #e74c3c;
    font-style: italic;
}

📖 Définition : Sélectionne les éléments personnalisés définis (Web Components).

custom-element:defined {
    border: 2px solid #2ecc71;
}

📖 Définition : Sélectionne un élément quand il reçoit le focus visible (navigation clavier).

button:focus-visible {
    outline: 3px solid #3498db;
    outline-offset: 2px;
}

📖 Définition : Sélectionne un élément lorsqu'un de ses enfants a le focus.

form:focus-within {
    background: #e8f4fd;
    padding: 15px;
    border-radius: 8px;
}

📖 Définition : Sélectionne les champs invalides après interaction utilisateur.

input:user-invalid {
    border-color: #e74c3c;
    background: #fdebd0;
}

📖 Définition : Sélectionne les éléments selon la direction du texte (ltr/rtl).

:dir(rtl) {
    text-align: right;
}
:dir(ltr) {
    text-align: left;
}

📖 Définition : Sélectionne un élément lorsqu'il est dans un état modal (dialog ouvert).

dialog:modal {
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

📖 Définition : Similaire à :is() mais avec une spécificité nulle.

:where(.article, .post) p {
    color: #555;
    line-height: 1.6;
}

📖 Définition : Sélectionne tous les liens (qu'ils soient visités ou non).

a:any-link {
    text-decoration: none;
    font-weight: bold;
}

📖 Définition : Sélectionne l'élément courant (utile pour les sous-titres de vidéos).

:current(slide) {
    background: #f9e79f;
}

📖 Définition : Sélectionne les éléments déjà passés (dans une chronologie).

:past {
    opacity: 0.5;
}

📖 Définition : Sélectionne les éléments à venir (dans une chronologie).

:future {
    opacity: 0.3;
}