How to reset/remove CSS styles for a specific element or selector only

by

The CSS property all has a keyword initial that sets the CSS property to the initial value as defined in the spec. The all keyword has broad browser support except for the IE and Opera Mini families.

/* basic modern patch */

#reset-this-root {
    all: unset;
}

or

#reset-this-root {
    all: initial;
}

Since IE’s lack of support may cause issue here are some of the ways you can reset some CSS properties to their initial values:

.reset-this {
    animation : none;
    animation-delay : 0;
    animation-direction : normal;
    animation-duration : 0;
    animation-fill-mode : none;
    animation-iteration-count : 1;
    animation-name : none;
    animation-play-state : running;
    animation-timing-function : ease;
    backface-visibility : visible;
    background : 0;
    background-attachment : scroll;
    background-clip : border-box;
    background-color : transparent;
    background-image : none;
    background-origin : padding-box;
    background-position : 0 0;
    background-position-x : 0;
    background-position-y : 0;
    background-repeat : repeat;
    background-size : auto auto;
    border : 0;
    border-style : none;
    border-width : medium;
    border-color : inherit;
    border-bottom : 0;
    border-bottom-color : inherit;
    border-bottom-left-radius : 0;
    border-bottom-right-radius : 0;
    border-bottom-style : none;
    border-bottom-width : medium;
    border-collapse : separate;
    border-image : none;
    border-left : 0;
    border-left-color : inherit;
    border-left-style : none;
    border-left-width : medium;
    border-radius : 0;
    border-right : 0;
    border-right-color : inherit;
    border-right-style : none;
    border-right-width : medium;
    border-spacing : 0;
    border-top : 0;
    border-top-color : inherit;
    border-top-left-radius : 0;
    border-top-right-radius : 0;
    border-top-style : none;
    border-top-width : medium;
    bottom : auto;
    box-shadow : none;
    box-sizing : content-box;
    caption-side : top;
    clear : none;
    clip : auto;
    color : inherit;
    columns : auto;
    column-count : auto;
    column-fill : balance;
    column-gap : normal;
    column-rule : medium none currentColor;
    column-rule-color : currentColor;
    column-rule-style : none;
    column-rule-width : none;
    column-span : 1;
    column-width : auto;
    content : normal;
    counter-increment : none;
    counter-reset : none;
    cursor : auto;
    direction : ltr;
    display : inline;
    empty-cells : show;
    float : none;
    font : normal;
    font-family : inherit;
    font-size : medium;
    font-style : normal;
    font-variant : normal;
    font-weight : normal;
    height : auto;
    hyphens : none;
    left : auto;
    letter-spacing : normal;
    line-height : normal;
    list-style : none;
    list-style-image : none;
    list-style-position : outside;
    list-style-type : disc;
    margin : 0;
    margin-bottom : 0;
    margin-left : 0;
    margin-right : 0;
    margin-top : 0;
    max-height : none;
    max-width : none;
    min-height : 0;
    min-width : 0;
    opacity : 1;
    orphans : 0;
    outline : 0;
    outline-color : invert;
    outline-style : none;
    outline-width : medium;
    overflow : visible;
    overflow-x : visible;
    overflow-y : visible;
    padding : 0;
    padding-bottom : 0;
    padding-left : 0;
    padding-right : 0;
    padding-top : 0;
    page-break-after : auto;
    page-break-before : auto;
    page-break-inside : auto;
    perspective : none;
    perspective-origin : 50% 50%;
    position : static;
    /* May need to alter quotes for different locales (e.g fr) */
    quotes : '\201C' '\201D' '\2018' '\2019';
    right : auto;
    tab-size : 8;
    table-layout : auto;
    text-align : inherit;
    text-align-last : auto;
    text-decoration : none;
    text-decoration-color : inherit;
    text-decoration-line : none;
    text-decoration-style : solid;
    text-indent : 0;
    text-shadow : none;
    text-transform : none;
    top : auto;
    transform : none;
    transform-style : flat;
    transition : none;
    transition-delay : 0s;
    transition-duration : 0s;
    transition-property : none;
    transition-timing-function : ease;
    unicode-bidi : normal;
    vertical-align : baseline;
    visibility : visible;
    white-space : normal;
    widows : 0;
    width : auto;
    word-spacing : normal;
    z-index : auto;
    /* basic modern patch */
    all: initial;
    all: unset;
}

With all this said, I don’t think a CSS reset is something feasible unless we end up with only one web browser, if the ‘default’ is set by browser in the end.

More Related Contents:

  1. Could someone explain this CSS code?
  2. Is there a CSS selector for elements containing certain text?
  3. How do I hide an element when printing a web page?
  4. ::slotted CSS selector for nested children in shadowDOM slot
  5. Aligning grid items across the entire row/column (like flex items can)
  6. How can I get FF 33.x Flexbox behavior in FF 34.x? [duplicate]
  7. Nesting CSS classes
  8. How can I force browsers to print background images in CSS?
  9. Is there any way to hover over one element and affect a different element? [duplicate]
  10. Is embedding background image data into CSS as Base64 good or bad practice?
  11. How to change an input button image using CSS
  12. Relationship between !important and CSS specificity
  13. Make a DIV fill an entire table cell
  14. Specify an SVG as a background image and ALSO style the SVG in CSS?
  15. Can I change the fill color of an svg path with CSS?
  16. Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?
  17. Add a css class to a field in wtform
  18. Borders not shown in Firefox with border-collapse on table, position: relative on tbody, or background-color on cell
  19. CSS transitions with calc() do not work in IE10+
  20. Make children divs the height of tallest child
  21. Remove “whitespace” between div element
  22. What does the double colon (::) mean in CSS?
  23. How to add fonts to create-react-app based projects?
  24. Arrow Box with CSS
  25. Fill only Half a star with SVG
  26. Creating CSS3 Circles connected by lines
  27. CSS: Constrain a table with long cell contents to page width?
  28. How do I change md-input-container placeholder color using css in angular material?
  29. internet explorer font face ssl
  30. Styling the arrow on bootstrap tooltips [duplicate]

Leave a Comment