css6

📖 Définition : Sélectionne les liens qui pointent vers la même page (ancres).

a:local-link {
    text-decoration: underline;
    font-weight: bold;
}

📖 Définition : Sélectionne les liens déjà visités par l'utilisateur.

a:visited {
    color: #9b59b6;
}

📖 Définition : Sélectionne les liens non visités.

a:link {
    color: #3498db;
    text-decoration: none;
}

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

a:any-link {
    font-weight: bold;
}

📖 Définition : Sélectionne l'élément ciblé par l'URL (ancre).

section:target {
    background: #f9e79f;
    border-left: 4px solid #f1c40f;
}

📖 Définition : Sélectionne l'élément en cours de lecture.

:current(slide) {
    background: #f9e79f;
    border-left: 4px solid #f1c40f;
}

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

:past {
    opacity: 0.5;
    filter: grayscale(0.5);
}

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

:future {
    opacity: 0.3;
}

📖 Définition : Sélectionne les éléments multimédia en cours de lecture.

video:playing {
    border: 3px solid #2ecc71;
}

📖 Définition : Sélectionne les éléments multimédia en pause.

video:paused {
    opacity: 0.8;
}

📖 Définition : Sélectionne la n-ième colonne dans un tableau ou une grille.

table :nth-col(even) {
    background: #e8f4fd;
}

📖 Définition : Sélectionne la n-ième colonne depuis la fin.

table :nth-last-col(1) {
    background: #fdebd0;
}

📖 Définition : Sélectionne les éléments à l'intérieur d'une colonne.

p:column(1) {
    color: #3498db;
}

📖 Définition : Sélectionne une grille qui contient un certain nombre d'éléments.

.grid:has(> :nth-child(4)) {
    background: #e8f4fd;
}

📖 Définition : Sélectionne le n-ième élément d'un type spécifique dans une grille.

.grid-item:nth-of-type(2) {
    background: #e74c3c;
}

📖 Définition : Regroupe plusieurs sélecteurs de manière compacte.

:is(header, main, footer) p {
    margin: 1em 0;
}

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

:where(.reset) p {
    margin: 0;
}

📖 Définition : Sélectionne les éléments qui ne correspondent pas au sélecteur.

li:not(.special, .disabled) {
    color: #2c3e66;
}

📖 Définition : Sélectionne un élément parent qui contient un certain enfant.

div:has(> img) {
    border: 2px solid #3498db;
    padding: 10px;
}

✨ RÉSULTAT

Avec image (bordure bleue)

Sans image (bordure grise)

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

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

📖 Définition : Sélectionne les champs auto-remplis par le navigateur.

input:autofill {
    background: linear-gradient(to right, #f9e79f, #f9e79f);
}

📖 Définition : Sélectionne les éléments personnalisés en fonction de leurs états internes.

toggle-switch:state(checked) {
    background: #2ecc71;
}

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

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

📖 Définition : Sélectionne les éléments popover lorsqu'ils sont ouverts.

.popover:popover-open {
    animation: fadeIn 0.3s ease;
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

📖 Définition : Style l'arrière-plan des éléments modaux ou en plein écran.

dialog::backdrop {
    background: linear-gradient(135deg, rgba(0,0,0,0.7), rgba(0,0,0,0.9));
    backdrop-filter: blur(5px);
}