CODEWITHSUNDEEP
htmlcss
Ionică Bizău
Ionică Bizău

Reputation: 113485

Entire (completely) overwrite CSS styles

How can I overwrite an entire CSS style for a class, id or other CSS selector?

For example:

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 (that is used only in one web page) I want to overwrite the class one-great-class completely what have I do to write?

.one-great-class {
    /* Is possible that a line of code to delete all styles from this class? */
}

Upvotes: 4

Views: 4394

Answers (3)

Adrift
Adrift

Reputation: 59859

It's not possible in CSS at the moment.

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

It can take three values:

initial | inherited | unset

Taken from the Cascading and Inheritance Module:

"For example, if an author specifies all: initial on an element it will block all inheritance and reset all properties, as if no rules appeared in the author, user, or user-agent levels of the cascade. "

According to the MDN documentation as of June 2017, all is currently supported by Chrome, Firefox/Mobile, and Opera. Safari supports only the CSS4 value revert, which is not supported by the 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;
  }

Upvotes: 7

enhzflep
enhzflep

Reputation: 13109

Tested to work with IE9, Chrome and Opera. I had a problem with this when I wrote it, so decided that rather than changing existing rules, that I'd just append a new rule after the existing ones. From memory, the problem was with the default browser found in Android 2.3

Altering an existing rule seemed to be a better(cleaner) solution, though appending new rules ultimately proved to be chosen path. (I was changing background images by creating images with a canvas and then setting the background-image property. The images could be quite large, hence the preference for update)

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);   
}

Sample CSS (before)

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

Usage:

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

Sample CSS (after)

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

Upvotes: 0

user2193789
user2193789

Reputation:

Browser will apply css that come last.

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

The class will get font-size value 14px.

You can decleare a css as final.

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

no genarel css rule can alter it.

Browser uses this method to give priority
inline < embeded < external < user-agent.

If you think you need more controll on css then use javascript to directly modfy dom.

Upvotes: -1

Related Questions