pstein Posted February 17, 2021 Share Posted February 17, 2021 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 More sharing options...
melahi Posted February 17, 2021 Share Posted February 17, 2021 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! Link to comment Share on other sites More sharing options...
dsonesuk Posted February 17, 2021 Share Posted February 17, 2021 By using a selector that has a higher precedence and using !important on that. #parentid .someclass { } body .someclass { } Link to comment Share on other sites More sharing options...
melahi Posted February 18, 2021 Share Posted February 18, 2021 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 More sharing options...
Sherin Posted March 3, 2021 Share Posted March 3, 2021 Follow the specificity rules https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now