Significance of CSS selectors with no space separation?

camner

Hikin' Mike has a CSS customization with the following (partial) code:

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .yui3-menu-has-children.sm-page-widget-nav-activepage > a {....

I know that CSS selectors separated by spaces means that the CSS code refers to the items that are children of the previous selector. For example,
.s1 .s2 p {color:red} means that all text within paragraph tags that are within a block with the class "s2" and is a child of block with class "s1" would be styled red.

But what is the significance of CSS code that has multiple selectors WITHOUT spaces in between, such as
.yui3-menu-has-children.sm-page-widget-nav-activepage ?

Allen

When there is not a space between class names it means they are in same class name group.
If they are not contained together they get a space.

Notice all these names are contained for this one class.
class="sm-user-professional sm-user-loggedin sm-user-owner sm-page sm-page-node sm-page-node-mxSFGH sm-page-parentnode-zsB4B sm-page-parentnode-Qm7v4 sm-page-parentnode-CfXwsd sm-page-initialized"

So
.sm-user-professional.sm-user-loggedin.sm-page-parentnode-CfXwsd or any combination of these have no spaces.

camner

Thanks for your response, but I don't fully understand. I thought that when one assigns multiple classes to an HTML element, it just means one wants to style the element according to the style settings for the various assigned classes.

So, for example consider…

 <div class="class1 class2">text here</div>

with this CSS:
.class1 {color:red;}
.class2 {background-color:blue;}

This allows one to format "text here" as red text with a blue background AND allows other divs to be formatted with red text (no background) or black text (blue background) without creating a new class just for "red text & blue background."

If I write this CSS:
.class1 class2 {color:red; background-color:blue;}
then I am saying that html elements that have the class "class2" that are CHILDREN of elements that have the class "class1" should be rendered as red text with a blue background.

But, what would this CSS mean?
.class1.class2 {color:red; background-color:blue;}

Sorry if I am missing something obvious!

Jtring

@camner said:

But, what would this CSS mean?
.class1.class2 {color:red; background-color:blue;}

Two classes together with no space is a logical AND. Your example matches HTML elements assigned BOTH class1 AND class2.