How to reset/remove CSS styles for a specific element or selector only
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;
}
- Relevant GitHub repo with a December 2017 more exhaustive list
- Related
- Related from MDN
- Related W3C specs
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.
How do I disable a CSS rule?
Can you make a second class and just add/remove it from your elements?
.margin {
margin: 4px 5px 6px 7px;
color: red;
}
.noMargin {
margin: 0px
color: red;
}
document.getElementById("class").classList.add('margin');
document.getElementById("class").classList.remove('noMargin');
document.getElementById("class").classList.add('noMargin');
document.getElementById("class").classList.remove('margin');
Disable a CSS rule
I think...basically no. You have to specify exactly same rules which you would like to disable.
But you can add some postprocessor to css files. In apache, all css requests route to something like postprocessor.php and there you can remove code which don't want with some parser, replacer.
Second choice is make some plugin for cms, which have some settings for this.
Third way to do this is using some dynamic/meta/scripting css language etc. SASS, LESS for generating this disabling rules.
How to disable and enable css rule
This is the purpose of classes. By assigning a class eg. to the <body>
tag, you get the same functionality:
<style type='text/css' id='divcolorgreen'>
body.divcolorgreen div{
color: green;
}
</style>
And then if <body>
looks like this:
<body class="divcolorgreen">
...
</body>
the rule is applied. To disable the rule, remove the mentioned class:
<body>
...
</body>
How to add and later remove or disable a CSS rule in JavaScript?
Seems like you could find an answer here on Mozilla Developer Network:
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule
Inserts a new CSS rule into the current style sheet
Example:
// create a style sheet and add rule
var borderStyleSheet = document.createElement("style");
document.head.appendChild(borderStyleSheet);
borderStyleSheet.sheet.insertRule("#myElement *{ outline: 1px solid red;}", 0);
// disable rule
borderStyleSheet.disabled = true;
// enable rule
borderStyleSheet.disabled = false;
// see existing stylesheets
console.log(document.styleSheets);
Reset element with a rule (delete all element styles on one class)
You can create a single CSS class that will "reset" styles to whatever you want:
.reset{
border:0;
padding:0;
margin:0;
font-weight:normal;
/*etc.*/
}
Then apply to your elements:
<h1 class="reset">...</h1>
Is this what you are after?
Just keep in mind that the first "C" in CSS stands for Cascading and thus you may need to be more specific in the CSS to overcome other styles applied to an element. CSS Precedence reference.
Related Topics
How to Style Django Validation Errors with Bootstrap
Apply Different Styles to Input Text Field When Empty (Using CSS)
Applying Borders to a Single Table Cell When Using Border-Collapse
Firefox Add's 2Px Padding in a Submit Button
Image Right Edge Fade/Blur CSS
CSS Background Color Not Working
Changing Size and Content of Header at Scrolling in Browser with CSS
How to Make Body Background Image Transparent in CSS
Firefox Printing Cuts Canvas on End of First Page, How to Make It Not Do That
Why Does The Overflow-Y Property Not Work with Percent Height
Word-Wrap Not Working in Internet Explorer
How to Align Reveal.Js Slides to The Top of The Page
How to Make Rounded Tabs with CSS
CSS Color Rendering Different in Safari