All - Property CSS
Summary of characteristics of the all
property
initial
| unset
| revert
| revert-layer
| inherit
Syntactic schema of all
.
all
propertyThe links in the diagram provide access to more details.
Description of the all
property.
all
is a CSS property that represents ALL properties. It allows, in a single write, to apply the same value to all the properties of an element.
It is mainly used for initialization, with the values initial
, unset
, etc.
This very particular property is in a way a universal summary, which initializes all the properties in a single write,
just like the other shorthand property initialize several properties.
For example, flex
initializes the three properties flex-grow
, flex-shrink
, and flex-basic
.
There are, however, two properties that will not be initialized by all
: they are direction
and unicode-bidi
.
These two properties have a special status: they should not be used in CSS, and should always be encoded in the document
(dir
attribute). However, they are kept to extend the possibilities of languages other than HTML.
all
can only accept initialization values: a write like all:20px;
doesn't make sense because many properties don't accept the 20px
numeric value.
Custom properties are not impacted by all
.
Remember that custom properties are defined by the developer and that their name must begin with a double hyphen.
Example: --color-logo:#845884;
.
Values for all
.
- all: revert; all: revert-layer;
Forces all properties of the element to the value they would have had without the application of any user styles. More information about the
revert
andrevert-layer
values. - all: unset;
Forces all properties of the element to the value of the parent element if those properties can be inherited, and to their initial value if they cannot be inherited. See the value
unset
. - all: inherit
Forces all properties of the element to the value inherited from the parent element. See the value
inherit
. - all: initial;
Forces all properties of the element to their initial value. See the value
initial
.
Manipulating the all
property programmatically.
Change the value of all
with Javascript.
The code below is an example to change the value of the all
property on ONE element.
Two syntaxes are possible: the first treats the style
as an array, the second as an object.

let el = document.getElementById('id');
el.style['all'] = 'initial';
// or
let el = document.getElementById('id');
el.style.all = 'initial';
Retrieve the value of all
with Javascript.
The value of the property must have been assigned to the element via its style
attribute, or by the previous code, but not by passing
by a CSS selector.

let el = document.getElementById('id');
let value = el.style['all'];
// or
let el = document.getElementById('id');
let value = el.style.all;
Retrieve the computed value of all
.
In the case of all
, the computed value doesn't make much sense because all
is a property that summarizes all the others.
Set the value of all
with JQuery.

$('#id').css('all', 'initial');
Test it yourself.
The buttons below apply the entered value to the all
property and then display either the value as it was applied,
or the computed value. In the case of the all
property, the computed value will always be empty.
Simulator.
The operation of the all
property is quite complex. Play around with the simulator below to get an idea.
The result has two elements, one being the parent of the other, to highlight the effect of the inherited
value.
all
is not reversible: you will have to reload the page to return to the original formatting.
all
is going to be changed.
all
property.all
property
Browsers on computers :
Mobile browsers :
Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Samsung Internet

Firefox pour Androïd

Edge

Firefox

Chrome pour Androïd

Androïd Brower

Safari

Safari sur IOS

Chrome

KaiOS Browser

Opéra mini
all
property history.
-
CSS Cascading and Inheritance Level 3
Introduction of theall
property shorthand for all other properties.July 13, 2001Working Draft.October 03, 2013Candidate Recommendation.December 22, 2020Proposed for recommendation.February 11, 2021Recommendation . -
CSS Cascading and Inheritance Level 4
Adding therevert
value, accepted by theall
property.April 21, 2015Working Draft.January 14, 2016Candidate Recommendation. -
CSS Cascading and Inheritance Level 5
Addingrevert-layer
value, forall
property.January 19, 2021Working Draft.January 13, 2022Candidate Recommendation.
See also, about the cascade.
The CSS Cascading and Inheritance specification of W3C contains information about the organization of complex style sheets and inheritance.
At-rules:

