25

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?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
kjosh
  • 587
  • 4
  • 11

4 Answers4

15

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.

Mark
  • 6,762
  • 1
  • 33
  • 50
  • This is not what the OP is asking. You are explaining here the difference between **either** the `.ui-widget` **or** the `.ui-widget .ui-widget` selector. The OP wants to know if there's a difference between the `.ui-widget` selector and **both selectors together** `.ui-widget, .ui-widget .ui-widget` – Danield Jan 28 '14 at 11:15
  • 2
    thats what i explaining – Mark Jan 28 '14 at 11:55
  • 2
    So are you saying that there's a difference or that there's no difference? – Danield Jan 28 '14 at 11:56
  • i am explaining what happens in/witch each selectors case, not the case if they are doing both the same or not or in the case they are redundant – Mark Jan 28 '14 at 13:47
  • @Mark You appear to be responding to the titular question, but not the asker's further inquiry: "but wouldn't those already be selected by the first selector?" i.e. they're wondering if it's redundant (it is) or if there's any reason to do it that way (there isn't). This isn't answering the question. – doppelgreener Jan 28 '14 at 13:49
  • 4
    Wouldn't both methods give you 90% of 90% in the nested classes case? – BlueRaja - Danny Pflughoeft Jan 28 '14 at 15:58
  • Would using `rem` units instead of a percentage also solve this problem? – David Conrad Jan 28 '14 at 17:41
  • 4
    I'm not sure why you are receiving all the upvotes that you are, as what you describe is simply not the case ([see this fiddle that has one group with the single selector and one group with the doubled](http://jsfiddle.net/VHhrY/3/)). – ScottS Jan 28 '14 at 19:56
  • 2
    @ScottS, BlueRaja: Exactly. The problem here is twofold: 1) a percentage value is used with a property where percentage values refer to the same property in the parent element, and 2) this property is being applied to every element in the hierarchy because they all match the selectors being demonstrated. This causes the effect to stack multiplicatively down *every level of elements* in the hierarchy. In other words, it's not a problem of cascading or overriding styles; the real issue here is with percentage values and the `font-size` property. – BoltClock Jan 29 '14 at 04:22
  • 1
    @BoltClock: I agree with most of what you so very well stated (which is why I posted the example fiddle countering this answer). The problem with **this answer** is exactly what you stated. However, _without_ context, and _with respect to_ the **question** itself, it may still be a matter of "overriding styles" that is the problem, because if some more specific selector is overriding the single `.ui-widget` for _nested_ widgets, and someone wants to insure a nested one is in fact `90%` of its parent, the `.ui-widget .ui-widget` may have purpose for that increased specificity. – ScottS Jan 29 '14 at 12:45
  • @ScottS: Yep, which brings me back to my comment on the question about it being a specificity hack. – BoltClock Jan 30 '14 at 09:50
14

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;
}
sree
  • 543
  • 6
  • 21
  • 1
    The behaviour is exactly the same if you remove the `.ui-widget .ui-widget` though. (And the `div .ui-widget` has nothing much to do with the situation) – doppelgreener Jan 28 '14 at 13:26
  • (Actually, the behaviour _is_ different if you remove the `.ui-widget .ui-widget` - but that's only because the `div .ui-widget` thing messes with it. Remove that from the equation, and the redundancy shows up.) – doppelgreener Jan 28 '14 at 13:47
6

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.

Danield
  • 121,619
  • 37
  • 226
  • 255
  • @sree - no difference - see this updated fiddle:http://jsfiddle.net/danield770/9AM6X/4/ - I simply removed the .class .class selector - and you get the same result... so the .class .class selector is redundant – Danield Jan 28 '14 at 10:53
  • Ah. Thank you. I didn't notice it before. – sree Jan 28 '14 at 11:12
  • 4
    There is definitely a difference: [specificity](http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/). – Robin Kanters Jan 28 '14 at 14:08
1

Note I am using ridiculous font sizes in the example to make the maths easier.

So assuming you had a base font size off 100px.

HMTL

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

If you only had the rule 

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

The parent .ui-widget would have a font size of 90px (90% of 100px).
The child .ui-widget would have a font size of 81px (90% of 90px).

With the rule 

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

Both the parent and child .ui-widget would have a font size of 90px

Martin
  • 1,216
  • 8
  • 15
  • 2
    Thank you for the explanation, it sounds logical and is probably what was intended. However as @Danield pointed out there doesn't seem to be such a different behaviour between the two, child-elements get progressively smaller in both cases. I also tested it in the meantime and came to the same conclusion. – kjosh Jan 28 '14 at 10:34
  • 1
    What you describe for the first case is true for either case, [see this fiddle](http://jsfiddle.net/VHhrY/3/). – ScottS Jan 28 '14 at 19:58