How to Remove CSS Styles for an Element Only
-
Use the
all: revertCSS Rule to Remove CSS Styles for an Element Only -
Use the
removeProperty()Method to Remove CSS Styles for an Element Only -
Use the
all: unsetMethod to Remove CSS Styles for an Element Only - Conclusion
You can remove CSS styles for an element only. For this intent, we have the following three methods to reset or remove CSS styles for an element:
- Remove CSS styles using the
all: revertCSS rule. - Remove CSS styles using the
removeProperty()method. - Remove CSS styles using the
all:unsetmethod.
Use the all: revert CSS Rule to Remove CSS Styles for an Element Only
The all: revert CSS rule is used to reset or remove all CSS styles for an element. This can be suitable if you want to remove all styles applied by a third-party stylesheet or if you want to reset your styles to their default values.
To use all: revert, add it to your CSS ruleset like so:
all: revert;
That’s it! All CSS styles will be removed from the element(s) to which this rule is applied.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Reset/Remove CSS Styles for Element</title>
<style>
section {
color: darkgreen;
}
p {
color: red;
}
section.with-revert {
color: revert;
}
</style>
</head>
<body>
<section>
<h3>This will be dark green</h3>
<p>Text in paragraph will be red.</p>
This will also be dark green.
</section>
<section class="with-revert">
<h3>This will be black</h3>
<p>Text in paragraph will be red.</p>
This will also be black.
</section>
</body>
</html>
Use the removeProperty() Method to Remove CSS Styles for an Element Only
Another way is to use the removeProperty() method to remove a specific CSS property from the element or a component.
This method removes inline styles and styles applied with a style sheet. To remove a CSS property from an element, you must use the CSS property name, not JavaScript.
For example, to remove the color property, you would use the removeProperty() method like this:
<!DOCTYPE html>
<html>
<head>
<style>
#ex1 {
color: red;
}
</style>
</head>
<body>
<h1>The removeProperty() Method</h1>
<p>Click the button to remove the color property.</p>
<button onclick="myFunction()">Try it</button>
<div id="ex1">Some text.</div>
<script>
function myFunction() {
var declaration = document.styleSheets[0].cssRules[0].style;
var removedvalue = declaration.removeProperty("color");
alert(removedvalue);
}
</script>
</body>
</html>
Use the all: unset Method to Remove CSS Styles for an Element Only
All property is shorthand for resetting all properties to their initial or inherited values. When used on an element, it will remove all CSS styles applied to that element, including any inline styles.
However, it will not remove any CSS styles used for the element’s children.
<!DOCTYPE html>
<html>
<head>
<title>
How to reset/remove CSS styles for element ?
</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
.geeks {
all: unset;
}
div {
color: Green;
font-size: 44px;
}
</style>
</head>
<body>
<center>
<div id="myid">
Reset/Remove CSS
</div>
<br />
<button id="gfg">
Click me to Unset CSS
</button>
<script>
$("#gfg").click(function () {
$("#myid").addClass("geeks");
});
</script>
</center>
</body>
</html>
Conclusion
There are three ways to reset or remove CSS styles for an element only.
The first way uses the all: revert CSS rule, which will remove all styles except HTML defaults. The second uses the removeProperty(), and the third uses the all:unset method that will also reset or remove CSS styles for an element only.
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn