Geek Answers Handbook

All (completely) overwrite CSS styles

How can I rewrite the entire CSS style for a class, id, or other CSS selector?

For instance:

If in styles1.css I have:

 /* also, this file contains a lot of styles used on other pages */ .one-great-class { background: white ... /* a lot of properties */ }

... and in styles2.css (which is used only on one web page), I want to overwrite the one-great-class completely , what did I write for writing?

 .one-great-class { /* Is possible that a line of code to delete all styles from this class? */ }
+4
source share
3 answers

This is not possible in CSS at the moment.

But ultimately there may be a property that does this: all

This can take three values:

initial | inherited | unset

Adapted from the Cascade and inheritance module :

"For example, if the author specifies everything: initial on the element, it blocks all inheritance and reset all properties, as if no rules appeared at the level of the author, user or user agent of the cascade."

According to the MDN documentation, as of June 2017, all is currently supported by Chrome, Firefox / Mobile, and Opera. Safari only supports CSS4 revert , which is not supported by other browsers.

  .one-great-class { border-radius: 50% 35% / 20% 25% 60%; color: red; font: 12px/14px Arial, serif; height: 20em; width: 20em; /*... etc. */ } .one-great-class { all: initial; }
+5
source

Tested to work with IE9, Chrome and Opera. I had a problem with this when I wrote it, so I decided that instead of changing the existing rules, I would simply add a new rule after the existing ones. From memory, the problem was in the default browser found in Android 2.3

Changing an existing rule seemed to be a better (cleaner) solution, although adding new rules ultimately turned out to be the chosen way. (I changed the background images by creating canvas images, and then setting the background-image property. Images can be quite large, hence the preference for updating)

Function

 function replaceRuleAttrib(ruleSelector, attribText, newValue) { var nSheets, nRules, sheetNum, curSheet, curStyle, curAttrib; var nSheets = document.styleSheets.length; if (nSheets == 0) document.head.appendChild(document.createElement('style')); else for (sheetNum = 0; sheetNum<nSheets; sheetNum++) { curSheet = document.styleSheets[sheetNum]; nRules = curSheet.cssRules.length; for (ruleNum=0; ruleNum<nRules; ruleNum++) { curRule = curSheet.cssRules[ruleNum]; if (curRule.selectorText == ruleSelector) { for (styleI=0; styleI<curRule.style.length; styleI++) { styleName = curRule.style[styleI]; styleVal = curRule.style[styleName]; if (styleName == attribText) { curRule.style[styleName] = newValue; return true; } } } } } document.styleSheets[0].insertRule( ruleSelector+'{' + attribText + ": " + newValue + "; }", 0); }

CSS Example (formerly)

 <style> h1 { color: red; } </style>

Application:

 function onHeadingClick() { replaceRuleAttrib('h1', 'color', 'green'); }

CSS example (after)

 <style> h1 { color: green; } </style>
0
source

The browser will apply the css, which will be the last.

 .class { font-size: 16px; font-size: 14px; }

The class will get a font size of 14px.

You can reduce css as final.

 .class { font-size: 14px !important; }

no genarel css rule can change it.

The browser uses this method to give priority to inline <nested <external <User agent.

If you think you need more controll on css then use javascript for direct modfy dom.

-1
source

More articles:


All Articles