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

css, css-selectors, primefaces

Solution

Edit: As @Robin Kanters and others have pointed out, there as a minor difference with adding the .class .class selector - specificity. (This can be seen here)

Otherwise, the .class .class selector is redundant.

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

and

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

produce the same results.

FIDDLE

You can see in the above fiddle that the single .ui-widget selector is sufficient to produce the recursive inheritance of the font-size.

Problem

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?

Original source