all

The all property in CSS resets all of the selected element's properties, except the direction and unicode-bidi properties that control text direction.

.module {
  all: unset;
}

The point of it is allowing for component-level resetting of styles. Sometimes it's far easier to start from scratch with styling rather than fight against everything that is already there.

Values

  • initial: resets all of the selected element's properties to their initial values as defined in the CSS spec.
  • inherit: the selected element inherits all of its parent element's styling, including styles that are not normally inheritable.
  • unset: the selected element inherits any inheritable values passed down from the parent element. If no inheritable value is available, the initial value from the CSS spec is used for each property.

A few properties do not have an initial value explicitly defined in the spec and instead allow the user agent to set the initial value — color and font-family are two examples. If all: initial; or all: unset; is applied, the user agent default value is used as the initial value for these properties.

all is considered a "shorthand" property because it allows us to control the values of every CSS property at once with a single declaration. However, unlike most shorthand properties, there is no practical "longhand" version and it has no sub-properties.

Demo

See the CSS tab for comments that indicate which properties are inheritable. Notice that when the inherit value is used, the div inherits every property from its parent, including it's width, padding, and border, which are not normally inherited.

See the Pen all property demo by CSS-Tricks (@css-tricks) on CodePen.

More Information

Browser Support

Chrome Safari Firefox Opera IE Android iOS
37 None 27 24 11 None None

Comments

  1. User Avatar
    Matt Lummus

    This also seems to nullify !important except for the cases regarding color, font family etc… http://jsfiddle.net/mattLummus/ywjd2o80/1/

  2. User Avatar
    Jonny Lin
    Permalink to comment#

    Doesn’t work in Edge nor IE http://caniuse.com/#feat=css-all

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag