Using 2 classes.

[murko]

I am most certainly just doing something wrong here but I can’t figure out what it is.

In short. These are the 2 classes that exist on a web page I often visit.

.ft-staff-supporter
.ft-staff-supported

Both of them originally shows a different icon (background-image) before a name (link)
I use the add-on Stylish to edit the CSS to my liking.

Now, the first class “.ft-staff-supporter” indicates a team that supports me.
The second class “.ft-staff-supported” indicates a team that I support.

So I made this in my Stylish:

/*The ones that support me*/
.ft-staff-supporter  ~ a { 
color:red !important;
background-color:#cdcdcd !important;
}

/*The ones I support*/
.ft-staff-supported  ~ a { 
color:blue !important;
background-color:#cdcdcd!important;
}

The above code works fine and makes the team name (link) blue with a gray background if the team is one that I support, and red with a gray background if it’s a team that gives me support.

Now in some cases there will be teams that support me AND that I support right back. I want to give them a color of their own!

I am trying this:

/*The ones I support AND support me back*/
.ft-staff-supporter.ft-staff-supported  ~ a { 
color:green !important;
background-color:#cdcdcd !important;
}

But that’s not working. Those teams also just get blue
What am I doing wrong here? Or is it just me missing the point and there is no way to actually accomplish this?

Regards
/Michael

Ps. I never used Markdown before so I don’t know if I did that one correct on the code examples in my post…..

[Shikkediel]

Most obvious cause I can think of – the last bit of CSS is placed before the other ones… tried it out and another !important should override a previous one.

Demo

Hmm… bad example maybe. The order there doesn’t seem to make a difference.

:-/

[murko]

Thanks for your input Shikkediel.
Unfortunately it didn’t solve my issue.

:/

[Atelierbram]

And if you ged rid of those !important declarations on the first set of rules?

[murko]

Do you meen like this Atelierbram:

/*The ones that support me*/
.ft-staff-supporter  ~ a { 
color:red;
background-color:#cdcdcd;
}

/*The ones I support*/
.ft-staff-supported  ~ a { 
color:blue;
background-color:#cdcdcd;
}

/*The ones I support AND support me back*/
.ft-staff-supporter.ft-staff-supported  ~ a { 
color:green !important;
background-color:#cdcdcd !important;
}

If so, that didn’t do the trick either, sorry to say.

Since none of these classes actually have color or bg-color in the original CSS I guess I don’t need the declaration !important at all really.
It was force of habit that put them there I guess :)

Maybe I just understood this feature about using double classes like this wrong.

[murko]

Ok, still tweaking this one, but I got a working solution now, but only so far as “combining”

Like if I use classA with background, classB with color and then in a third example combine these two into this:

/*The ones that support me*/
.ft-staff-supporter  ~ a { 
background-color:#cdcdcd !important;
}

/*The ones I support*/
.ft-staff-supported  ~ a { 
color:blue !important;
}

/*The ones I support AND support me back*/
.ft-staff-supporter.ft-staff-supported  ~ a { 
color:blue !important;
background-color:#cdcdcd !important;
}

This works!
Supporting teams has a gray bg.
Supported teams has a blue color
Both-way-teams has gray bg AND blue color.
I can’t get it to work the way I intended from the start.

Maybe this one is the only way I will get it to work?

[Atelierbram]

There just must be a way to make this work, maybe will try a Codepen later …

[murko]

Thanks for the support Atelierbram :)
I will check back in later today or later in the week to see if any of you CSS-wizards can help me figure this one out.

/Michael

[bearhead]

I removed the important declarations, and it seems to be working as expected in chrome at least (I assume it would be ok in other browsers?)…

http://codepen.io/kvana/pen/OydGOY

Maybe there is some conflict with the add-on you’re using?

[Author]

Posts