The Style Sheet Syntax

Conflict Resolution

Conflicts arise when several style rules specify the same properties with different values. Consider the following style sheet:

 QPushButton#okButton { color: gray }
 QPushButton { color: red }

Both rules match QPushButton instances called okButton and there is a conflict for the color property. To resolve this conflict, we must take into account the specificity of the selectors. In the above example, QPushButton#okButton is considered more specific than QPushButton, because it (usually) refers to a single object, not to all instances of a class.

Similarly, selectors with pseudo-states are more specific that ones that do not specify pseudo-states. Thus, the following style sheet specifies that a QPushButton should have white text when the mouse is hovering over it, otherwise red text:

 QPushButton:hover { color: white }
 QPushButton { color: red }

Here's a tricky one:

 QPushButton:hover { color: white }
 QPushButton:enabled { color: red }

Here, both selectors have the same specificity, so if the mouse hovers over the button while it is enabled, the second rule takes precedence. If we want the text to be white in that case, we can reorder the rules like this:

 QPushButton:enabled { color: red }
 QPushButton:hover { color: white }

Alternatively, we can make the first rule more specific:

 QPushButton:hover:enabled { color: white }
 QPushButton:enabled { color: red }

A similar issue arises in conjunction with Type Selectors. Consider the following example:

 QPushButton { color: red }
 QAbstractButton { color: gray }

Both rules apply to QPushButton instances (since QPushButton inherits QAbstractButton) and there is a conflict for the color property. Because QPushButton inherits QAbstractButton, it might be tempting to assume that QPushButton is more specific than QAbstractButton. However, for style sheet computations, all Type Selectors have the same specificity, and the rule that appears last takes precedence. In other words, color is set to gray for all QAbstractButtons, including QPushButtons. If we really want QPushButtons to have red text, we can always reorder the rules.

For determining the specificity of a rule, Qt Style Sheets follow the CSS2 Specification:

A selector's specificity is calculated as follows:

• count the number of ID attributes in the selector (= a)
• count the number of other attributes and pseudo-classes in the selector (= b)
• count the number of element names in the selector (= c)
• ignore pseudo-elements [i.e., subcontrols].

Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.

Some examples:

 *             {}  /* a=0 b=0 c=0 -> specificity =   0 */
 LI            {}  /* a=0 b=0 c=1 -> specificity =   1 */
 UL LI         {}  /* a=0 b=0 c=2 -> specificity =   2 */
 UL OL+LI      {}  /* a=0 b=0 c=3 -> specificity =   3 */
 H1 + *[REL=up]{}  /* a=0 b=1 c=1 -> specificity =  11 */
 UL OL LI.red  {}  /* a=0 b=1 c=3 -> specificity =  13 */
 LI.red.level  {}  /* a=0 b=2 c=1 -> specificity =  21 */
 #x34y         {}  /* a=1 b=0 c=0 -> specificity = 100 */

 qApp->setStyleSheet("QPushButton { color: white }");

 myPushButton->setStyleSheet("* { color: blue }");

 myPushButton->setStyleSheet("color: blue");

 qApp->setStyleSheet("QGroupBox { color: red; } ");

 qApp->setStyleSheet("QGroupBox, QGroupBox * { color: red; }");

 class MyPushButton : public QPushButton {
     // ...
 }

 // ...
 qApp->setStyleSheet("MyPushButton { background: yellow; }");

 namespace ns {
     class MyPushButton : public QPushButton {
         // ...
     }
 }

 // ...
 qApp->setSytleSheet("ns--MyPushButton { background: yellow; }");

 MyLabel { qproperty-pixmap: url(pixmap.png); }
 MyGroupBox { qproperty-titleColor: rgb(100, 200, 100); }
 QPushButton { qproperty-iconSize: 20px 20px; }