All - Property CSS

all

Summary of characteristics of the all property

Quick description
Initialize all properties.
Status
Standard
Usable for
HTML
Predefined values
initial | unset | revert | revert-layer | inherit
Percentages
See individual properties.
Initial value
See individual properties.
Animation type
See individual properties.
W3C Module
CSS Cascading and Inheritance
References (W3C)
 🡇  
 🡅  
Document status: CR (Candidate Recommendation)

Document status: CR (Candidate Recommendation)

Document status: REC (Recommendation)

Syntactic schema of all.

all - Syntax DiagramSyntax diagram of the all CSS property. See www.stylescss.com for details. initial initial inherit inherit unet unet revert revert revert-layer revert-layerall;all;
Syntactic schema of all property
The 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 and revert-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.

Javascript
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.

Javascript
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.

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 :

 

Parent element
The element whose property all is going to be changed.

Column 1
Support for the all property.
1
all
property
Estimated overall support.
97%

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 the all property shorthand for all other properties.
    WD
    July 13, 2001
    Working Draft.
    CR
    October 03, 2013
    Candidate Recommendation.
    PR
    December 22, 2020
    Proposed for recommendation.
    REC
    February 11, 2021
    Recommendation .
  • CSS Cascading and Inheritance Level 4

    Adding the revert value, accepted by the all property.
    WD
    April 21, 2015
    Working Draft.
    CR
    January 14, 2016
    Candidate Recommendation.
    PR
    REC
  • CSS Cascading and Inheritance Level 5

    Adding revert-layer value, for all property.
    WD
    January 19, 2021
    Working Draft.
    CR
    January 13, 2022
    Candidate Recommendation.
    PR
    REC

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:

@import
Langue française
Importing a style sheet.
@layer
Langue française
Defines cascade layers to help manage priorities between CSS rules.

Values:

!important
Makes a rule priority over all others.
inherit
Sets a property to the same value as the parent element.
initial
Restores a property to its original value.
revert
Sets a property to the value set by the browser.
revert-layer
Restores a property's value to the value it had in the previous layer.
unset
Gives a property the value it would have had if no style had changed it.