CODEWITHSUNDEEP
htmlcssclasstags
user1382306
user1382306

Reputation:

!imporant equivalent for HTML class tag?

I'm dealing with a real hash of a site, so this is why I'm asking about this absurd question.

I've looked everywhere to find some sort of way to make a class override another class in the HTML class tag to no avail.

I can either do this, try to untie a ton of spaghetti (which I probably won't be allowed to do anyways), or something anyone else can recommend (would be greatly appreciated).

Is this possible?

class="myClass !important"

If not, is there some sort of equivalent?

Please help! Many thanks in advance!

Upvotes: 0

Views: 857

Answers (5)

sbeliv01
sbeliv01

Reputation: 11810

If you have the ability to change the HTML templates, you can always go in and add a <div id="override"> or something like that to the outer most wrapper of the page to use as the "master" rule in your CSS classes. Then, in the CSS, you can just add that ID before any of the existing classes or ones that you need to modify.

For instance, if you have the following and want to override the .some-class:

<div class="some-class">Bleh.</div>

And the corresponding CSS:

.some-class { color: red; }

You can wrap the whole thing with:

<div id="override">
    <div class="some-class">Bleh.</div>
</div>

And add the #override (or whatever you want to name it) before the .some-class and this rule will take precedence over the other:

#override .some-class { color: green; } /* This will override the red color form the other rule */
.some-class { color: red; }

Upvotes: 2

udidu
udidu

Reputation: 8588

CSS classes are just a group of styles so you can use class instead of inline style tag. The !important keyword helps you to override a specific style and not working on classes. So, for example:

Lets say that we have a css rule on every div somewhere in our CSS file

div{border:solid 1px #ff0000;}

And later on we have this rule:

div{background:#000000;}

Every div in our page will be with border and a background if we want to override the div css rules we need to do something like this:

div{background:none !important;border:none !important;/*...ADD YOUR CSS...*/}

you can create a css reset class to reset all the settings that you want and than add your css

Upvotes: 0

War10ck
War10ck

Reputation: 12508

You can add more than one class to a selector as follows:

class="myClass myClass2"

Above is what the class attribute would look like on your HTML element.

As far as the CSS goes, define the classes as follows:

.myClass {
    color: black;
    font-size: 14px;
}

The above is just a sample of some properties you may have.

Defining "myClass2" after "myClass" in your stylesheet will allow the properties from "myClass2" to overrided the matching ones in "myClass":

//This goes below myClass
.myClass2 {
    font-size: 16px;
}

As long as "myClass2" is after "myClass", your font will take the size property of '16px;' The value of "myClass" will be overwritten by that of "myClass2". If "myClass2" comes before "myClass", you can use !important to ensure that style is taken over the one defined later:

//This goes above myClass
.myClass2 {
    font-size: 16px !important;
}

Hope this helps.

Upvotes: 0

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 174957

You can't use !important for entire selectors. You need to find the specific rules you want to override, and use !important on each.

Upvotes: 2

chrisfrancis27
chrisfrancis27

Reputation: 4536

No, that's not possible. You're going to have to iron out the CSS Specificity by yourself I'm afraid.

Upvotes: 3

Related Questions