Sélecteurs CSS modernes

Propriétés, sélecteurs et pseudo‑éléments modernes.

Formulaires modernes

Formulaires modernes

Activer la personnalisation native d’un select

HTML

<select class="ui-select">
        <option>Option 1</option>
        <option>Option 2</option>
</select>

Autre contrôle utilisant base-select

HTML

<select class="theme-select">
        <option>Light</option>
        <option>Dark</option>
</select>

CSS

.ui-select {
appearance: base-select;
}

Variantes possibles : base-select, base-button, base-listbox.

Styliser le menu déroulant du select

HTML

<select class="ui-select">
        <option>A</option>
        <option>B</option>
</select>

CSS

.ui-select::picker(select) {
        background: #111;
        color: #fff;
        border-radius: 8px;
}

Autre style de picker

CSS

.ui-select::picker(select) {
        background: #fff;
        border: 1px solid #ccc;
}

Variantes possibles : ::picker(select), ::picker(list), ::picker(option), ::picker(button).

Styliser l’icône native du select

CSS

.ui-select::picker-icon {
        color: #ff0066;
        width: 1rem;
        height: 1rem;
}

Variantes possibles : couleur, taille, rotation.

Styliser l’icône de sélection dans les options

CSS

.ui-select::checkmark { color: #ff0066; }

Variantes possibles : couleur, taille, police.

Styliser le contenu affiché dans le bouton du select

CSS

.ui-select selectedcontent { font-weight: 700; }

Variantes possibles : couleur, graisse, taille.

Utiliser du HTML enrichi dans les options

HTML

<select class="ui-select">
        <option>
                <img src="flag-fr.svg"> France
        </option>
        <option>
                <img src="flag-de.svg"> Allemagne
        </option>
</select>

Variantes possibles : images, SVG, icônes, structure interne.

Positionner le menu du select avec anchor()

HTML

<select class="ui-select" anchor-name="--sel">
        <option>A</option>
</select>

<div class="picker"></div>

CSS

.picker {
        position-anchor: --sel;
        top: anchor(bottom);
}

Variantes possibles : anchor(top), anchor(bottom), anchor(center), anchor-size().

Empêcher le menu déroulant de sortir de l’écran

HTML

<div class="picker"></div>

CSS

.picker {
        position-area: block-end;
        position-try-order: flip-block, flip-inline;
}

Repositionner le menu si l’espace manque

CSS

.picker { position-try-fallbacks: block-start, inline-end; }

Variantes possibles : flip-block, flip-inline, block-start, block-end.

Sélecteurs structurels

Sélecteurs structurels modernes

Styliser un parent selon un enfant présent

HTML

<div class="card">
        <span class="badge">Nouveau</span>
</div>

CSS

.card:has(.badge) { border: 1px solid #ff0066; }

Autre condition sur un parent

HTML

<label class="row">
        <input type="checkbox" checked>
        <span>Option</span>
</label>

CSS

.row:has(input:checked) {
        background: #111;
        color: #fff;
}

Variantes possibles : :has(:focus), :has(img), :has(a:hover).

Regrouper plusieurs sélecteurs avec spécificité réduite

HTML

<button class="btn-primary">OK</button>
<button class="btn-secondary">Annuler</button>

CSS

button:is(.btn-primary, .btn-secondary) { padding: 0.5rem 1rem; }

Variantes possibles : :is(a, button), :is(h1, h2, h3).

Styliser plusieurs éléments sans créer de conflits CSS

HTML

<form class="form">
        <input>
        <textarea>
</form>

CSS

.form :where(input, textarea) { border: 1px solid #ccc; }

Autre groupe

CSS

nav :where(a, button) { font-size: 0.875rem; }

Variantes possibles : :where() avec n’importe quel groupe.

Exclure plusieurs sélecteurs en même temps

HTML

<button class="btn primary">OK</button>
<button class="btn danger">Supprimer</button>

CSS

.btn:not(.danger, .warning) { opacity: 0.8; }

Autre exclusion multiple

CSS

li:not(.active, .disabled) { cursor: pointer; }

Cibler un élément selon sa position et son type

HTML

<ul>
        <li class="item">A</li>
        <li class="item">B</li>
        <li class="item special">C</li>
</ul>

CSS

li:nth-child(2 of .item) { color: #ff0066; }

Variantes possibles : nth-child(), nth-last-child(), nth-of-type(), nth-last-of-type() avec “of selector”.

Styliser selon la direction du texte

HTML

<p dir="rtl">Hello</p>

CSS

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

Variantes possibles : :dir(ltr), :dir(rtl).

Styliser selon la langue du contenu

HTML

<p lang="fr">Bonjour</p>

CSS

p:lang(fr) { font-style: italic; }

Variantes possibles : :lang(fr), :lang(en), :lang(de), etc.

Un élément sur deux

HTML

<ul>
        <li class="row">A</li>
        <li class="row">B</li>
        <li class="row">C</li>
        <li class="row">D</li>
</ul>

CSS

.row:nth-child(odd) { background: #111; }
.row:nth-child(even) { background: #222; }

Un élément sur deux version compacte

CSS

.row:nth-child(2n) { background: #111; }
.row:nth-child(2n+1) { background: #222; }

Un élément sur trois

CSS

.row:nth-child(3n+1) { background: #111; }
.row:nth-child(3n+2) { background: #222; }
.row:nth-child(3n+3) { background: #333; }
Sélecteurs d’état

Sélecteurs d’état modernes

Styliser un élément lorsqu’il est ouvert

HTML

<details class="faq">
<summary>Question</summary>
<p>Réponse</p>
</details>

CSS

.faq:open { border-color: #ff0066; }

Variantes possibles : details:open, dialog:open, select:open.

Styliser un popover lorsqu’il est ouvert

HTML

<button popovertarget="info">Info</button>
<div id="info" popover>Texte</div>

CSS

[popover]:popover-open { opacity: 1; }

Variantes possibles : :popover-open sur tout élément popover.

Styliser un dialog modal actif

HTML

<dialog class="box" modal>…</dialog>

CSS

dialog:modal { backdrop-filter: blur(8px); }

Variantes possibles : dialog:modal uniquement.

Styliser un champ validé par l’utilisateur

HTML

<input type="email" class="field" required>

CSS

.field:user-valid { border-color: #00cc66; }

Autre champ

HTML

<input type="text" class="field" pattern="[A-Za-z]+">

Styliser un champ invalidé par l’utilisateur

HTML

<input type="email" class="field" required>

CSS

.field:user-invalid { border-color: #ff0033; }

Autre champ

HTML

<input type="number" min="10" max="20" class="field">

Variantes possibles : :user-invalid, :user-valid.

Styliser un champ dont la valeur est dans la plage autorisée

HTML

<input type="number" min="0" max="100" class="num">

CSS

.num:in-range {
color: #00cc66;
}

Styliser un champ hors plage

CSS

.num:out-of-range {
color: #ff0033;
}

Variantes possibles : :in-range, :out-of-range.

Styliser un champ rempli automatiquement

HTML

<input type="email" class="auto">

CSS

.auto:autofill {
background: #fff8cc;
}

Variantes possibles : :autofill uniquement.

Styliser un custom element une fois chargé

HTML

<my-card></my-card>

CSS

my-card:defined {
opacity: 1;
}

Variantes possibles : tout custom element avec :defined.

Styliser un conteneur contenant une ancre active

HTML

<section id="bloc" class="zone">…</section>
<a href="#bloc">Aller</a>

CSS

.zone:target-within {
outline: 2px solid #ff0066;
}

Variantes possibles : :target-within uniquement.

Styliser un élément au focus clavier

HTML

<button class="btn">OK</button>

CSS

.btn:focus-visible {
outline: 2px solid #00b3ff;
}

Variantes possibles : :focus-visible, :focus-within.

Styliser un conteneur contenant un élément focus

HTML

<div class="group">
<input>
</div>

CSS

.group:focus-within {
border-color: #ff0066;
}

Variantes possibles : :focus-within uniquement.

Pseudo‑éléments

Pseudo‑éléments modernes

Styliser la puce d’une liste

HTML

<ul>
        <li>Item</li>
</ul>

CSS

li::marker {
        color: #ff0066;
        font-size: 1.2rem;
}

Autre style de puce

CSS

li::marker { content: "→ "; }

Variantes possibles : couleur, taille, content.

Styliser les fautes d’orthographe détectées

HTML

<p>Texte avec errur</p>

CSS

::spelling-error { text-decoration: underline red wavy; }

Variantes possibles : ::spelling-error, ::grammar-error.

Erreur grammatical

CSS

::grammar-error { background: #cce0ff; }

Variantes possibles : couleur, soulignement, fond.

Créer un style de surlignage personnalisé

HTML

<p class="txt">Texte</p>

CSS

::highlight(selection) {
        background: #ff0066;
        color: #fff;
}

Variantes possibles : ::highlight(name) avec plusieurs styles.

Styliser le texte ciblé par une ancre

HTML

<p id="zone">Texte ciblé</p>
<a href="#zone">Aller</a>

CSS

::target-text {
        background: #ff0066;
        color: #fff;
}

Variantes possibles : fond, contour, couleur.

Styliser le bouton d’un input file

HTML

<input type="file" class="file">

CSS

.file::file-selector-button {
        background: #111;
        color: #fff;
        padding: 0.5rem 1rem;
}

Variantes possibles : couleur, padding, border.

Styliser le contenu d’un <details>

HTML

<details class="faq">
        <summary>Titre</summary>
        <p>Texte</p>
</details>

CSS

.faq::details-content { padding: 1rem; }

Variantes possibles : padding, fond, bordure.

Styliser l’arrière-plan d’un dialog

HTML

<dialog class="modal">…</dialog>

CSS

dialog::backdrop { backdrop-filter: blur(8px); }

Variantes possibles : blur, opacity, couleur, background.

Styliser une partie interne d’un composant Web

HTML

<my-card part="header"></my-card>

CSS

my-card::part(header) { font-weight: 700; }

Variantes possibles : ::part(name) pour chaque zone.

Styliser un élément passé dans un slot

HTML

<my-box>
        <span slot="label">Texte</span>
</my-box>

CSS

my-box::slotted(span) { color: #ff0066; }

Variantes possibles : ::slotted(tag), ::slotted(.class).

Anchor Positioning

Anchor Positioning

Définir un élément comme ancre de positionnement

HTML

<button class="btn" anchor-name="--trigger">Ouvrir</button>

CSS

.btn { anchor-name: --trigger; }

Autre élément ancré

HTML

<div class="icon" anchor-name="--icon"></div>

Variantes possibles : anchor-name: --id; plusieurs ancres possibles.

Attacher un élément à une ancre définie

HTML

<button class="btn" anchor-name="--trigger"></button>
<div class="panel">Menu</div>

CSS

.panel { position-anchor: --trigger; }

Autre élément attaché

HTML

<div class="tooltip">Info</div>

CSS

.tooltip { position-anchor: --trigger; }

Variantes possibles : position-anchor: --id; un seul anchor par élément.

Positionner un élément selon un point précis de l’ancre

HTML

<button class="btn" anchor-name="--trigger"></button>
<div class="panel"></div>

CSS

.panel {
top: anchor(bottom);
left: anchor(center);
}

Variantes possibles : anchor(top), anchor(bottom), anchor(left), anchor(right), anchor(center).

Utiliser la taille de l’ancre dans un calcul

HTML

<button class="btn" anchor-name="--trigger"></button>
<div class="panel"></div>

CSS

.panel { width: anchor-size(width); }

Variantes possibles : anchor-size(width), anchor-size(height).

Choisir la zone préférée autour de l’ancre

HTML

<button class="btn" anchor-name="--trigger"></button>
<div class="menu"></div>

CSS

.menu { position-area: block-end; }

Variantes possibles : block-start, block-end, inline-start, inline-end.

Définir l’ordre des tentatives de placement

HTML

<div class="menu"></div>

CSS

.menu { position-try-order: flip-block, flip-inline; }

Variantes possibles : flip-inline, flip-block.

Définir les zones alternatives en cas d’échec

HTML

<div class="menu"></div>

CSS

.menu { position-try-fallbacks: block-start, inline-end; }

Variantes possibles : block-start, block-end, inline-start, inline-end.

View Transitions

View Transitions

Styliser l’ancienne vue lors d’une transition

HTML

<div class="page" id="home">Accueil</div>
<div class="page" id="about">À propos</div>

CSS

::view-transition-old(page) { opacity: 0; }

Styliser la nouvelle vue lors d’une transition

HTML

<div class="page" id="home">Accueil</div>
<div class="page" id="about">À propos</div>

CSS

::view-transition-new(page) { opacity: 1; }

Variantes possibles : opacity, transform, filter.

Grouper plusieurs éléments dans une transition

HTML

<img src="photo1.jpg" class="img" view-transition-name="photo">
<img src="photo2.jpg" class="img" view-transition-name="photo">

CSS

::view-transition-group(photo) {
animation-duration: 0.4s;
}

Variantes possibles : group(name) pour chaque élément animé.

Styliser une paire d’images ancienne + nouvelle

HTML

<img src="photo-old.jpg" class="img" view-transition-name="photo">
<img src="photo-new.jpg" class="img" view-transition-name="photo">

CSS

::view-transition-image-pair(photo) { mix-blend-mode: normal; }

Autre style de paire

CSS

::view-transition-image-pair(photo) { filter: brightness(1.2); }

Variantes possibles : blend-mode, filter, opacity.

Activer une transition de vue sur un changement de page

HTML

<a href="/about" class="link">Aller</a>
<div class="page" id="home">Accueil</div>
<div class="page" id="about">À propos</div>

CSS

html { view-transition-name: page; }

Variantes possibles : view-transition-name sur n’importe quel élément.

Contrôler la durée et le timing de la transition

HTML

<div class="page">…</div>

CSS

::view-transition-group(page) {
animation-duration: 0.5s;
animation-timing-function: ease-out;
}

Autre timing

CSS

::view-transition-group(page) { animation-timing-function: linear; }

Variantes possibles : ease, ease-in, ease-out, linear, cubic-bezier(0, 0, 1, 1).

Transition sur un élément précis

HTML

<div class="card" view-transition-name="card">Card</div>

CSS

::view-transition-old(card) {
opacity: 0;
transform: scale(0.95);
}

::view-transition-new(card) {
opacity: 1;
transform: scale(1);
}

Transition sur changement d’état

HTML

<div id="box" class="stateA" view-transition-name="box">Box</div>

CSS

::view-transition-old(box) { opacity: 0; }
::view-transition-new(box) { opacity: 1; }
Scroll & Layout

Scroll & Layout modernes

Activer un scroll fluide vers une zone

HTML

<a href="#zone">Aller</a>
<div id="zone">Contenu</div>

CSS

html { scroll-behavior: smooth; }

Activer un scroll fluide dans un conteneur

CSS

.panel { scroll-behavior: smooth; }

Variantes possibles : auto, smooth.

Aligner automatiquement les éléments lors du scroll

HTML

<div class="slider">
    <div class="slide">1</div>
    <div class="slide">2</div>
</div>

CSS

.slider {
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    display: flex;
}
.slide { scroll-snap-align: start; }

Variantes possibles : start, center, end.

Contrôler le rebond du scroll

HTML

<div class="zone">Contenu</div>

CSS

.zone { overscroll-behavior: contain; }

Variantes possibles : auto, contain, none.

Styliser les marqueurs de scroll

HTML

<div class="scrollbox">…</div>

CSS

.scrollbox::scroll-marker { background: #ff0066; }

Variantes possibles : couleur, taille (support limité).

Styliser les boutons de scroll natifs (expérimental)

HTML

<div class="scrollbox">…</div>

CSS

.scrollbox::scroll-button { color: #ff0066; }

Variantes possibles : couleur uniquement (support limité).

Forcer un ratio fixe sur un élément

HTML

<div class="thumb"></div>

CSS

.thumb {
    aspect-ratio: 16 / 9;
    background: #333;
}

Variantes possibles : 1/1, 4/3, 3/2, 21/9.

Contrôler le recadrage d’une image

HTML

<img src="image.jpg" class="cover">

CSS

.cover {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

Variantes possibles : cover, contain, fill, none, scale-down.

Changer la zone visible d’une image recadrée

HTML

<img src="image.jpg" class="top">

CSS

.top { object-position: top; }

Variantes possibles : top, bottom, left, right, center.

Aligner contenu et items en une seule propriété

HTML

<div class="grid">
    <div>A</div>
</div>

CSS

.grid {
    display: grid;
    place-content: center;
}

Autre alignement

CSS

.grid { place-items: end; }

Variantes possibles : start, center, end, stretch.

Adapter un style selon la taille d’un conteneur

HTML

<div class="box">
    <p>Texte</p>
</div>

CSS

@container (min-width: 300px) {
    .box p { font-size: 1.2rem; }
}

Autre condition de conteneur

CSS

@container style(--theme: dark) {
    .box { background: #111; }
}

Variantes possibles : size queries, style queries.

Définir une marge interne au scroll

HTML

<div class="zone">
    <div id="item">Item</div>
</div>

CSS

.zone { scroll-padding: 2rem; }
Fonctions CSS

Fonctions CSS modernes

Limiter une valeur entre un minimum et un maximum

HTML

<h1 class="title">Titre</h1>

CSS

.title { font-size: clamp(1.5rem, 2vw, 2.5rem); }

Autre usage de clamp()

CSS

.box { width: clamp(200px, 50vw, 800px); }

Variantes possibles : clamp(min, préféré, max).

Choisir la plus petite valeur parmi plusieurs

HTML

<div class="panel"></div>

CSS

.panel { width: min(100%, 600px); }

Autre usage de min()

CSS

.panel { padding: min(5vw, 2rem); }

Variantes possibles : min() sur width, height, padding, margin.

Choisir la plus grande valeur parmi plusieurs

HTML

<div class="hero"></div>

CSS

.hero { height: max(50vh, 300px); }

Autre usage de max()

CSS

.hero { margin-top: max(2rem, 5vh); }

Variantes possibles : max() sur height, margin, padding.

Combiner plusieurs unités dans un calcul

HTML

<div class="box"></div>

CSS

.box { width: calc(100% - 2rem);}

Autre usage de calc()

CSS

.box { height: calc(50vh + 100px); }

Variantes possibles : +, -, *, /.

Utiliser des fonctions trigonométriques en CSS

HTML

<div class="rotate"></div>

CSS

.rotate { transform: rotate(sin(45deg) * 1turn); }

Autre fonction trigonométrique

CSS

.rotate { transform: translateX(cos(30deg) * 50px); }

Variantes possibles : sin(), cos(), tan(), asin(), acos(), atan().

Utiliser le modulo dans un calcul

HTML

<div class="pattern"></div>

CSS

.pattern { width: calc(100px % 30); }

Autre usage du modulo

CSS

.pattern { height: calc(200px % 40); }

Variantes possibles : % dans calc().

Arrondir une valeur dans un calcul

HTML

<div class="round"></div>

CSS

.round { width: round(33.33px, 10px); }

Autre arrondi

CSS

.round { width: round(5.5rem, 1rem); }

Variantes possibles : round(valeur, multiple).

Obtenir le signe d’une valeur

HTML

<div class="sg"></div>

CSS

.sg { margin-left: calc(sign(-20px) * 10px); }

Autre usage de sign()

CSS

.sg { margin-left: calc(sign(50px) * 5px); }

Variantes possibles : sign() retourne -1, 0 ou 1.

Calculer l’hypoténuse entre deux valeurs

HTML

<div class="hyp"></div>

CSS

.hyp { width: hypot(3px, 4px); }

Autre usage de hypot()

CSS

.hyp { height: hypot(10px, 10px); }

Variantes possibles : hypot(a, b).

Élever une valeur à une puissance

HTML

<div class="pow"></div>

CSS

.pow { width: pow(2, 3); }

Autre puissance

CSS

.pow { width: pow(4, 2); }

Variantes possibles : pow(base, exposant).

Calculer une racine carrée

HTML

<div class="sq"></div>

CSS

.sq { width: sqrt(49px); }

Autre racine

CSS

.sq { width: sqrt(100px); }

Variantes possibles : sqrt(valeur).