Jump to content

How to overwrite an "!important" by a "MORE !important" CSS rule?


pstein

Recommended Posts

Assume I load a web page which contains a CSS stylesheet. I have no access to the webserver and the original CSS stylesheet but want to modify it by applying another, own CSS stylesheet after loading.

Normally this can be done by specifying an "!important" attribute. So

.someclass { 
    margin-left: 40px !important;
    width: 1280px !important;
}

overwrites the original

.someclass { 
    margin-left: 20px;
    width: 1024;
}

But what, if the original CSS already contains CSS rules with !important flag?
What I need is something like a !moreimportant attribute:

.someclass { 
    margin-left: 40px !moreimportant;
    width: 1280px !moreimportant;
}

How can I achieve this?

Related question: How can I disable an existing whole CSS rule (.someclass from above)?

Link to comment
Share on other sites

Sorry... wrong link. it's here: http://ngaro.online/z.html

On 2/17/2021 at 7:46 PM, melahi said:

do...view source and save it, then edit that and add a style section at the end of head

I added the following to a clone of this page:

 


<style>
	body {
		max-width:600px;
		color:red;
		background-color:#404020;
		margin:auto;
	}
</style>

and this is the result:

http://test-pc/z.html

feel free to ask if it's not clear what I did!

(note: test-pc, is my offline server) - my bad! 😳

Link to comment
Share on other sites

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...