Entire (completely) overwrite CSS styles

Question

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? */
}

@kba you cant necessarily do that. What if the css is part of a 3rd party library ? — karthikr, Apr 11 '13 at 16:20
Supose that first file contains a lot of styles, and they are used on other pages. And in a single page I want to use the second file. — Ionică Bizău, Apr 11 '13 at 16:20
@karthikr: Then edit the 3rd part library to use your own styles. John: Why not use a different class name on the other page, then? — kba, Apr 11 '13 at 16:22
@kba Really ? That is scary dude. If you update the library your changes are gone.. Bad idea — karthikr, Apr 11 '13 at 16:23

score 7 · Accepted Answer · edited Jun 29 '17 at 13:12

7

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

edited Jun 29 '17 at 13:12

Wolfram Schmied

629
6
11

answered Apr 11 '13 at 16:22

Adrift

58,167
12
92
90

2

Note that this will also override any property set by other rule-sets (except those which appear further down the cascade). – Quentin Apr 11 '13 at 16:24
Thank you, but unfortunately it doesn't work. See this [jsFiddle](http://jsfiddle.net/Dfn7G/1/). It has to be the same thing if the first line from CSS is commented or not. Am I correct? – Ionică Bizău Apr 11 '13 at 18:53
Also keep in mind I said that the `all` property is not something supported widely right now .. the module is still in working draft status – Adrift Apr 11 '13 at 19:05
@Adrift, yes. It was my mistake. Look again [here](http://jsfiddle.net/Dfn7G/2/). I want to overwrite the `.btn` class completely. So, it has to remain a simple `div`, hasn't it? – Ionică Bizău Apr 12 '13 at 05:19

score 0 · Answer 2 · answered Apr 11 '13 at 16:56

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>

No, I don't think it's ideal either. It is however, the _only_ way to overwrite a css style (which was after all, what you asked for). All other solutions involve overriding it (but leaving it there intact, and adding another style after the offending one) :-) — enhzflep, Apr 11 '13 at 19:22

score -1 · Answer 3 · answered Apr 11 '13 at 16:35

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.

Entire (completely) overwrite CSS styles

3 Answers3

Linked