Basic questions regarding classes and selectors

[franciscolourenco]

The google group would probably be a more appropriate place to have this kind of discussion, but my membership is taking a while to approve.

In this simple example of buttons with icons, a few questions appeared, and the best option didn't seem clear. Please advise your preferred answer, and if necessary explain why.

The questions are the following and are explained here: https://dpaste.de/FF2D#L10,48,87

1. .class.combination VS .longClasses VS child selector
2. (*) selector VS extra .content class VS multiple selectors
3. Child VS Descendant selectors

EDIT 1: For each question select an option, for example:
1C
2A
3B

EDIT 2: If you are wondering why the button text is wrapped in a span, the objective is to keep the icon and the text equally vertically-aligned: http://jsfiddle.net/5WCSz/11/
If you know a better way, please let know.

In respect to the vertical alignment check out:
http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Depending on your level of browser support that might be an option.