Difference between ".class" and ".class, .class .class"?

Question

The following excerpt from the PrimeFaces documentation makes it seem as there is a difference between the two selectors described in the title:

.ui-widget, .ui-widget .ui-widget {
     font-size: 90% !important;
}

Can someone explain the significance of the second selector (".ui-widget .ui-widget") to me? I understand that it matches elements of class "ui-widget" that are themselves children of other elements of the same class, but wouldn't those already be selected by the first selector?

Answer 1

when .ui-widget is in .ui-widget (so no combined selector), then the font-size would be 90% of 90%, with the selector .ui-widget .ui-widget, it is set initially to 90% by using !important

This will do two things:

1. set the font size of components with the ui-widget class to 90% (of the parent)
2. set the font size of components with the ui-widget class and are children of another component with the ui-widget class to 90% (of the parent)

the reason .ui-widget .ui-widget was required in the standard CSS was to prevent the reverse problem: font size increasing in nested ui-widgets.

Without the style defined for .ui-widget .ui-widget, the default font-size: 90% style applied to .ui-widget causes the font size to increase in nested ui-widgets.

By adding the more specific .ui-widget .ui-widget selector with font size set to 90% you will ensure that you get a consistent font size, no matter how deep you nest your components.

Answer 2

It is significant. In case there are some other css rules defined in some css files, this may be required to override those generic rules for specific elements.Consider this scenario.

Here, We have another Div and another css rule.

See this demo with .class.class and demo without .class.class. In such scenarios it has significance. To override some other generic css rules

<div class="ui-widget">
    single
</div>

<div class="ui-widget">
    parent
    <div class="ui-widget">
        child
    </div>
</div>

<div>
    <div class="ui-widget">
        child
    </div>
</div>

css

.ui-widget, .ui-widget .ui-widget {
     font-size: 150% !important;
}

div .ui-widget{
     font-size: 20% !important;
}