:default

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

La pseudo-classe :default représente un élément de l'interface utilisateur qui est l'élément par défaut parmi d'autres éléments semblables (par exemple le bouton par défaut d'un groupe de boutons).

css
/* Cible l'élément par défaut d'un groupe */
:default {
  background-color: lime;
}

Ainsi, le bouton actionné par défaut parmi plusieurs boutons pourra être mis en forme en le ciblant avec cette pseudo-classe.

Ce sélecteur peut être utilisé sur des éléments <button>, <input type="checkbox">, <input type="radio"> et <option> :

  • Un élément <option> par défaut est le premier qui possède l'attribut selected ou le premier qui est activé selon l'ordre du DOM.
  • Les éléments <input type="checkbox"> et <input type="radio"> seront ciblés s'ils possèdent l'attribut checked.
  • L'élément <button> est ciblé si c'est le bouton d'envoi par défaut d'un formulaire, c'est-à-dire le premier bouton (selon l'ordre du DOM) appartenant au formulaire (cela vaut également pour les éléments <input> dont le type permet d'envoyer des formulaires tels que image ou submit).

Note : La spécification WHATWG HTML définit cela dans le paragraphe 4.16.3.

Les éléments de l'interface utilisateur qui permette une sélection multiple peuvent avoir plusieurs éléments par défaut. Dans ce cas, tous les éléments par défaut sont ciblés via la pseudo-classe :default.

Syntaxe

Error: could not find syntax for this item

Exemples

CSS

css
input:default {
  box-shadow: 0 0 2px 1px coral;
}

input:default + label {
  color: coral;
}

HTML

html
<fieldset>
  <legend>Saison préférée</legend>

  <input type="radio" name="season" id="spring" />
  <label for="spring">Printemps</label>

  <input type="radio" name="season" id="summer" checked />
  <label for="summer">Eté</label>

  <input type="radio" name="season" id="fall" />
  <label for="fall">Automne</label>

  <input type="radio" name="season" id="winter" />
  <label for="winter">Hiver</label>
</fieldset>

Résultat

Spécifications

Specification
HTML
# selector-default
Selectors Level 4
# default-pseudo

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:default

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support