0

I am attempting to create a custom stylish theme for blender.stackexchange, however the rules are only affecting some tags for me in FF 29.0.1

As far as I can tell, all the tag elements have all the same classes/parent elements/etc., yet only some are affected by the stylish stylesheet.

My complete stylish theme which I'm using for testing:

@-moz-document url('https://blender.stackexchange.com/') {

.post-tag, .tags a:hover, .tags * {
    color:red !important;
}

}

All the tags turn red when hovered over, yet only some are red when not under the cursor. Why is this?

Here's an example of one of the tags which is not overwritten:

enter image description here

And one which is (though according to the inspector, it is not!?):

enter image description here

Interestingly, I tried this on SO and it worked as expected.

Community
  • 1
  • 1
gandalf3
  • 1,636
  • 4
  • 24
  • 40
  • 1
    F12, inspect the links that aren't red and see if the classes match your css rule. – khollenbeck Jun 25 '14 at 21:26
  • @KrisHollenbeck They do, as far as I can see. – gandalf3 Jun 25 '14 at 21:34
  • 1
    TIP: Please avoid at all costs the use of `!important`. – emerson.marini Jun 25 '14 at 21:57
  • gandalf, where exactly does it say they are inheriting their color value from? In all likelihood, what's happening is that the color is being overwritten by a more specific selector. – djbhindi Jun 25 '14 at 22:13
  • @MelanciaUK It turns pink somehow if I don't use !important. It's really odd because according to FF the rule for turning it pink is on the line before `color:blue;`, except there is no such line.. (I've tried clearing my cache, that didn't help) – gandalf3 Jun 25 '14 at 22:14
  • @djbhindi I'm really confused now. I've uploaded a screenshot, maybe it will help.. – gandalf3 Jun 25 '14 at 22:18
  • Hmm, not really sure. Try adding a.post-tag to your css selector, maybe? I'm kind of grasping at straws, sorry. – djbhindi Jun 25 '14 at 22:23
  • @djbhindi That didn't do anything.. (The `.post-tag` was getting that anyway). Thanks for the reply though. – gandalf3 Jun 25 '14 at 22:40
  • All those strange caching type issues seemed to go away when I restarted FF, so now the question is: Why do some elements become red while others do not? – gandalf3 Jun 25 '14 at 23:07
  • 1
    Is there a `:visited` rule overwriting things? In Blender's current CSS, there is a `.post-tag:visited` rule that defines an !important color as well (eww), which matches your most recent screen shot's color. – Aken Roberts Jun 25 '14 at 23:10
  • @Cryode Thank you! It seems that was it (removing the !important in the color declaration for `a.post-tag:visited` made all the tags red). Now how do I override it from stylish? – gandalf3 Jun 25 '14 at 23:16
  • @Cryode I solved it with a very long and specific selector and an !important flag. Add an answer and I'll accept :) – gandalf3 Jun 25 '14 at 23:57

2 Answers2

1

There is an existing rule for the visited anchor state with an !important declaration that's preventing the new color from taking priority.

Existing style:

a.post-tag:visited {
    color: #566e76 !important;
}
Aken Roberts
  • 13,012
  • 3
  • 34
  • 40
0

Thanks to Cryode, who pointed out that there was a :visited rule with an !important color declaration.

I managed to override this from Stylish with a more specific selector:

a.post-tag, div.tags > a.post-tag:visited {
    color:blue !important;
}
Community
  • 1
  • 1
gandalf3
  • 1,636
  • 4
  • 24
  • 40