Mot-clé CSS unset

Le mot-clé CSS unset réinitialise une propriété à sa valeur héritée si la propriété hérite naturellement de son parent, et à sa valeur initiale sinon. En d'autres termes, il se comporte comme le mot-clé inherit dans le premier cas, lorsque la propriété est une propriété héritée, et comme le mot-clé initial dans le second cas, lorsque la propriété est une propriété non héritée.

unset peut être appliqué à n'importe quelle propriété CSS, y compris la propriété raccourcie CSS all.

Exemples

color

color est une propriété héritée.

HTML

<p>Ce texte est rouge.</p>
<div class="toto">
 <p>Ce texte est aussi rouge.</p>
</div>
<div class="truc">
 <p>Ce texte est vert (valeur héritée par défaut).</p>
</div>

CSS

.toto {
 color: blue;
}
.truc {
 color: green;
}
p {
 color: red;
}
.truc p {
 color: unset;
}

Résultat

border

border est une propriété non héritée.

HTML

<p>Ce texte a une bordure rouge.</p>
<div class="toto">
 <p>Ce texte a une bordure rouge</p>
</div>
<div class="truc">
 <p>Ce texte a une bordure noire (la valeur initiale, non héritée)</p>
</div>

CSS

div {
 border: 1px solid green;
}
p {
 border: 1px solid red;
}
.truc p {
 border-color: unset;
}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• Utilisez le mot-clé initial pour définir une propriété à sa valeur initiale.
• Utilisez le mot-clé inherit pour que la propriété d'un élément soit la même que celle de son parent.
• Utilisez le mot-clé revert pour réinitialiser une propriété à la valeur établie par la feuille de style de l'agent utilisateur (ou par les styles utilisateur·ice, le cas échéant).
• Utilisez le mot-clé revert-layer pour réinitialiser une propriété à la valeur établie dans une couche de cascade précédente.
• Utilisez le mot-clé revert-rule pour réinitialiser une propriété à la valeur d'une règle de style correspondante antérieure.
• La propriété all permet de réinitialiser toutes les propriétés à leur état initial, hérité, rétabli ou non défini.