Questions about Skin classes in css file

[J]

I am attempting to use a custom skin and having difficulty understanding some things.  For instance, I see the following code in the css file:

.RadMenu_MySkin .rmRootGroup,
.RadMenu_MySkin .rmLink,
.RadMenu_MySkin .rmText,
.RadMenu_MySkin .rmLeftArrow,
.RadMenu_MySkin .rmRightArrow,
.RadMenu_MySkin .rmTopArrow,
.RadMenu_MySkin .rmBottomArrow
{
    background-image: url(rmSprite.png');
    background-color: transparent;
}


.RadMenu_MySkin .rmRootGroup
{
    border: 0px solid #000000;
}

I can't help but wonder, why do .RadMenu_MySkin .rmRootGroup twice?

Is there some kind of resource that tells you where exactly these classes are being associated with?  Or am I resigned to the view source of the initial page load?

Is this how css works by listing rmLink 5 different times?

.RadMenu_MySkin,
.RadMenu_MySkin .rmLink
{

    /*font: normal 12px/23px Arial, sans-serif;*/
    font: bold 12px/23px Arial, sans-serif;
    text-decoration: none;
    color: #fff;
}

.RadMenu_MySkin .rmLink
{
    /*
    color: #fff; /* static menu text color *
    */
}

.RadMenu_MySkin .rmLink,
.RadMenu_MySkin .rmText
{
    background-position: 0 1050px;
    background-repeat: no-repeat;
}

/*
This appears to be that weird 'left' aligned block that first shows up.
*/
.RadMenu_MySkin .rmLink:hover,
.RadMenu_MySkin .rmFocused,
.RadMenu_MySkin .rmSelected
{
    color:#ffffff;
    background-position: 0 -72px;
}

/*
Here it appears we fill in the rest of the div tag.
*/
.RadMenu_MySkin .rmLink:hover .rmText,
.RadMenu_MySkin .rmFocused .rmText,
.RadMenu_MySkin .rmSelected .rmText
{
    background-position: 100% -96px;
    border-bottom-style:none;
    border-bottom-color:Black;
    border-bottom-width:0px;
    margin-top:10px;
    z-index:2;
}

J

[Kamen Bundev]

Hi,

.RadMenu_MySkin .rmRootGroup is a selector - it is used by the rendering engine to select the element for styling and apply the specified property to it. It doesn't really matter how many times you use it, the idea in your first example is that the background color and image is the same for all those elements while the border is only applied on the element with class .rmRootGroup.

There is a section in the documentation which describes the CSS selectors for every control, for RadMenu it is here:
http://www.telerik.com/help/aspnet-ajax/menu_appearancecssselectors.html

.rmLink:hover is not the same as .rmLink - it only targets the element with class .rmLink when the mouse cursor is hovering it.

More information on CSS and helpful hints you can find in this CSS tutorial.

All the best,
Kamen Bundev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.