6

I am trying to override a website's background with Stylish but it isn't working. The background css for the website also has an !important, and it is overriding Stylish.

My code: 

body {
  background-image: none !important; 
  background: black !important;
}
Zoe
  • 27,060
  • 21
  • 118
  • 148
Enoch
  • 252
  • 1
  • 4
  • 12
  • 1
    i don't know anything about stylish, but as a guess, css works on the last rule it finds. so is stylish added in a similar way to css? if so, just make stylish the last thing that gets loaded, or at least after your css. – mmeasor May 01 '14 at 20:29
  • Stylish typically inserts its CSS first -- which is useful in many situations, but not this one. – Brock Adams May 02 '14 at 01:31

3 Answers3

6

You'll need to be more specific (quick guide to CSS specificity), for instance, using the > selector:

body {
  background-image: none !important; 
  background: black !important;
}

html > body {
  background-image: none !important; 
  background: red !important;
}

JSBin

SomeKittens
  • 38,868
  • 19
  • 114
  • 143
  • @sbeliv01 Thanks! Forgot about that one. – SomeKittens May 01 '14 at 20:35
  • 1
    If you cannot find a suitably more specific selector, you will need to use a Greasemonkey/Tampermonkey script. – Brock Adams May 02 '14 at 02:18
  • Is there any more info on how specificity is decided? Is there a way to artificially increase specificity? For example is `* > div` more specific than `div`? Is it possible to create a non-class/id specific rule which over-rides a class rule (my use case)? Your answer is useful to OP but could do with including more info. – AnnanFay Aug 16 '17 at 05:26
0

Firstly, I advise you to not use !important very often, try to avoid it at all.

IFf you have an element you can define the CSS path to this element more well so this overrides that. For example:

.elem { 
    color: black!important; 
}

#list1 > .elem { 
    color: red!important; 
}
Bluedayz
  • 599
  • 5
  • 17
  • 4
    You didn't read the question - he isn't writing the page, someone else did. He's using an extension to modify the page. – SomeKittens May 01 '14 at 20:37
  • He can still edit the stuff if he can connect to that ftp server that I probably think he can. The second example would still work, even if he inserts his css in a custom way like "Stylish" wants. "you can define the CSS path to this element more well so this overrides that" is not the answer to the question??? – Bluedayz May 02 '14 at 07:59
  • The OP has zero control over the server; he certainly cannot connect with FTP! (This is true of almost every Stylish or userscript scenario.) This answer is mostly wrong for this question (and the other answer better explains the right parts). Stylish is also a case where `!important` is not only okay, it is often necessary. (`!important` is bad practice for web designers, but not for userscripters.) – Brock Adams May 02 '14 at 08:46
  • Ah, I thought the OP uploaded that to the server like you do with joomla and so on. I'm sorry. "You can define the CSS path to this element more well so this overrides that" still answers the question. – Bluedayz May 02 '14 at 08:47
0

The official documentation of how specificity works is here. In a high number base specificity is simply (100 * ID rules) + (10 * class rules) + (1 * tag rules).

If you are running into a very obnoxious website or wish to use a very broad rule you can use :not(#some_id_which_you_will_never_find) to artificially increase specificity. ID rules have the highest value so you should use them.

For example I wanted to ensure that every div in a website was not marked as visibility: hidden and used this:

div:not(#oStHDi_0):not(#oStHDi_1):not(#oStHDi_2):not(#oStHDi_3):not(#oStHDi_4):not(#oStHDi_5) {
    visibility: inherit !important;
}

This has a specificity of 601.

In your case body has specificity 001, html > body is 002 and body:not(#foobar) is 101.

AnnanFay
  • 9,573
  • 15
  • 63
  • 86