CSS Help: Conditional Styling?

Soldato
Joined
5 Mar 2003
Posts
10,754
Location
Nottingham
Ahoy!
Basically I have to style a third party control and I've come unstuck. I have the following html:
<li class="rmItem rmFirst">
<a class="rmLink rmDisable">
<span class="rmText"></span>
</a>
</li>

Now the rmDisable is optional - it's only there when the control is disabled. The background for the whole item (li) is green. When it's disabled I want it to be grey...

At the moment the css is just:
.rmItem { background-color: green; }

But then I want something like
.rmItem [where child is a.rmDisable] { background-color: grey !important; }

I tried '.rmItem a.rmDisable' but it applies the styling to the inner item, so has the wrong affect on the styling (the inner box is smaller than the outer, so I could see grey and green).

Any help will be much appreciated.
 
Last edited:
Soldato
Joined
26 Dec 2003
Posts
16,522
Location
London
Yeah, put it on the parent:

Code:
<li class="rmItem rmDisable">
<a class="rmLink">
<span class="rmText"></span>
</a>
</li>

Code:
.rmItem.rmDisable {
    background-color:grey;
}

(also I'm willing to bet your use of "!important" is unnecessary and could be removed if you use/understand the cascade properly)
 

AJK

AJK

Associate
Joined
8 Sep 2009
Posts
1,722
Location
UK
Goksly:

Assuming you can't move the rmDisable class (since you say you're styling a third party control), you could accomplish this with a small bit of javascript.

For example, using jQuery you'd only need:

Code:
jQuery("a.rmDisable").parent().addClass("rmDisable");

Then in your stylesheet you could include this to get the effect you need:

Code:
li.rmDisable { background-color: grey; }
 
Soldato
OP
Joined
5 Mar 2003
Posts
10,754
Location
Nottingham
Ok thanks for that input guys. As noticed its a third party control so I can't do that. With this in mind I've altered the css so the li css is said applied to li.rmLink instead. This works fine but.....

The first item needs slightly dufferent css than the others. I've altered the css in the first post to show the new optional flag.

How can I specify the css to be used on dual class elements (i.e. if I specify both classes I thought it would give more 'weight' to those options so they override the less specific css?).

I've tried the following:
.RadMenu_Default li.rmItem.rmFirst a.rmLink
{
additional css for a few items that I want to override ones below
}

.RadMenu_Default li.rmItem a.rmLink
{
full css needed for all items
}

But it doesn't seem to work,.

Cheers.
 
Soldato
Joined
12 May 2007
Posts
3,896
Location
Bristol
As soon as I saw the 'rm' prefix in your class names, I sighed a little bit inside. We used to use the rad stuff, so I feel your pain.
I ended up talking my boss into letting me recreate it all with jquery and I can tell you, not seeing all that horrible code bloat is reward enough.
 
Soldato
OP
Joined
5 Mar 2003
Posts
10,754
Location
Nottingham
We really don't have the time to do our own controls at the moment so the telerik stuff for the most part saves us a lot of time. Internally we just use their skins so things like the radgrid are amazing... this is the first bit of external facing asp.net work we've had to do so there is a little bit of pain involved :)
 
Back
Top Bottom