Cómo restablecer/eliminar estilos CSS solo para un elemento o selector específico

Resuelto matt_50 asked hace 11 años • 17 respuestas

¿Existe una regla CSS disponible que elimine los estilos establecidos previamente en la hoja de estilos para un elemento en particular?

Un buen ejemplo de uso podría ser un sitio RWD para dispositivos móviles donde gran parte del estilo utilizado para un elemento particular en las vistas de pantalla pequeña necesita "restablecerse" o eliminarse para el mismo elemento en la vista de escritorio.

Una regla CSS que podría lograr algo como:

.element {
  all: none;
}

Uso de ejemplo:

/* mobile first */
.element {
   margin: 0 10;
   transform: translate3d(0, 0, 0);
   z-index: 50;
   display: block;
   etc..
   etc..
}

@media only screen and (min-width: 980px) {
  .element {
    all: none;
  }
}

De esta manera podríamos eliminar o restablecer rápidamente el estilo sin tener que declarar todas las propiedades.

matt_50 avatar Apr 09 '13 18:04 matt_50
Aceptado

La propiedad CSS alltiene una palabra clave initialque establece la propiedad CSS en el valor inicial definido en la especificación . La allpalabra clave tiene una amplia compatibilidad con navegadores, excepto las familias IE y Opera Mini.

/* basic modern patch */

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

o

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

Dado que la falta de soporte de IE puede causar problemas, estas son algunas de las formas en que puede restablecer algunas propiedades CSS a sus valores iniciales:

.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;
}
  • Repositorio relevante de GitHub con una lista más exhaustiva de diciembre de 2017
  • Relacionado
  • Relacionado de MDN
  • Especificaciones W3C relacionadas

Dicho todo esto, no creo que un restablecimiento de CSS sea algo factible a menos que terminemos con un solo navegador web, si al final el navegador establece el valor "predeterminado".

Milche Patern avatar Apr 09 '2013 13:04 Milche Patern

La allpropiedad hace esto y funciona así:

CSS:

#someselector {
  all: initial;
}

#someselector * {
  all: unset
}

SCSS:

#someselector {
  all: initial;
  * {
    all: unset;
  }
}
  • Funciona en todos los navegadores principales que aún son compatibles. No funciona en Internet Explorer, si aún tienes que mantenerlo.
joost avatar Jul 09 '2015 12:07 joost