<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- stylesheet.qdoc -->
<title>The Style Sheet Syntax | Qt Widgets 5.9</title>
<link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
<script type="text/javascript">
document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
// loading style sheet breaks anchors that were jumped to before
// so force jumping to anchor again
setTimeout(function() {
var anchor = location.hash;
// need to jump to different anchor first (e.g. none)
location.hash = "#";
setTimeout(function() {
location.hash = anchor;
}, 0);
}, 0);
</script>
</head>
<body>
<div class="header" id="qtdocheader">
<div class="main">
<div class="main-rounded">
<div class="navigationbar">
<table><tr>
<td >Qt 5.9</td><td ><a href="qtwidgets-index.html">Qt Widgets</a></td><td >The Style Sheet Syntax</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right">Qt 5.9.4 Reference Documentation</td>
</tr></table>
</div>
</div>
<div class="content">
<div class="line">
<div class="content mainContent">
<link rel="prev" href="stylesheet.html" />
<link rel="next" href="stylesheet-designer.html" />
<p class="naviNextPrevious headerNavi">
<a class="prevPage" href="stylesheet.html">Qt Style Sheets</a>
<span class="naviSeparator"> ◦ </span>
<a class="nextPage" href="stylesheet-designer.html">Qt Designer Integration</a>
</p><p/>
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#style-rules">Style Rules</a></li>
<li class="level1"><a href="#selector-types">Selector Types</a></li>
<li class="level1"><a href="#sub-controls">Sub-Controls</a></li>
<li class="level1"><a href="#pseudo-states">Pseudo-States</a></li>
<li class="level1"><a href="#conflict-resolution">Conflict Resolution</a></li>
<li class="level1"><a href="#cascading">Cascading</a></li>
<li class="level1"><a href="#inheritance">Inheritance</a></li>
<li class="level1"><a href="#widgets-inside-c-namespaces">Widgets Inside C++ Namespaces</a></li>
<li class="level1"><a href="#setting-qobject-properties">Setting QObject Properties</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">The Style Sheet Syntax</h1>
<span class="subtitle"></span>
<!-- $$$stylesheet-syntax.html-description -->
<div class="descr"> <a name="details"></a>
<p>Qt Style Sheet terminology and syntactic rules are almost identical to those of HTML CSS. If you already know CSS, you can probably skim quickly through this section.</p>
<a name="style-rules"></a>
<h2 id="style-rules">Style Rules</h2>
<p>Style sheets consist of a sequence of style rules. A <i>style rule</i> is made up of a selector and a declaration. The <i>selector</i> specifies which widgets are affected by the rule; the <i>declaration</i> specifies which properties should be set on the widget. For example:</p>
<pre class="cpp">
<span class="type"><a href="qpushbutton.html">QPushButton</a></span> { color: red }
</pre>
<p>In the above style rule, <code>QPushButton</code> is the selector and <code>{ color: red }</code> is the declaration. The rule specifies that <a href="qpushbutton.html">QPushButton</a> and its subclasses (e.g., <code>MyPushButton</code>) should use red as their foreground color.</p>
<p>Qt Style Sheet is generally case insensitive (i.e., <code>color</code>, <code>Color</code>, <code>COLOR</code>, and <code>cOloR</code> refer to the same property). The only exceptions are class names, <a href="../qtcore/qobject.html#objectName-prop">object names</a>, and Qt property names, which are case sensitive.</p>
<p>Several selectors can be specified for the same declaration, using commas (<code>,</code>) to separate the selectors. For example, the rule</p>
<pre class="cpp">
<span class="type"><a href="qpushbutton.html">QPushButton</a></span><span class="operator">,</span> <span class="type"><a href="qlineedit.html">QLineEdit</a></span><span class="operator">,</span> <span class="type"><a href="qcombobox.html">QComboBox</a></span> { color: red }
</pre>
<p>is equivalent to this sequence of three rules:</p>
<pre class="cpp">
<span class="type"><a href="qpushbutton.html">QPushButton</a></span> { color: red }
<span class="type"><a href="qlineedit.html">QLineEdit</a></span> { color: red }
<span class="type"><a href="qcombobox.html">QComboBox</a></span> { color: red }
</pre>
<p>The declaration part of a style rule is a list of <code><i>property</i>: <i>value</i></code> pairs, enclosed in braces (<code>{}</code>) and separated with semicolons. For example:</p>
<pre class="cpp">
<span class="type"><a href="qpushbutton.html">QPushButton</a></span> { color: red; background<span class="operator">-</span>color: white }
</pre>
<p>See the <a href="stylesheet-reference.html#list-of-properties">List of Properties</a> section below for the list of properties provided by Qt widgets.</p>
<a name="selector-types"></a>
<h2 id="selector-types">Selector Types</h2>
<p>All the examples so far used the simplest type of selector, the Type Selector. Qt Style Sheets support all the <a href="http://www.w3.org/TR/REC-CSS2/selector.html#q1">selectors defined in CSS2</a>. The table below summarizes the most useful types of selectors.</p>
<div class="table"><table class="generic" width="100%">
<thead><tr class="qt-style"><th >Selector</th><th >Example</th><th >Explanation</th></tr></thead>
<tr valign="top" class="odd"><td >Universal Selector</td><td ><code>*</code></td><td >Matches all widgets.</td></tr>
<tr valign="top" class="even"><td >Type Selector</td><td ><code>QPushButton</code></td><td >Matches instances of <a href="qpushbutton.html">QPushButton</a> and of its subclasses.</td></tr>
<tr valign="top" class="odd"><td >Property Selector</td><td ><code>QPushButton[flat="false"]</code></td><td >Matches instances of <a href="qpushbutton.html">QPushButton</a> that are not <a href="qpushbutton.html#flat-prop">flat</a>. You may use this selector to test for any Qt <a href="../qtcore/properties.html">property</a> that supports <a href="../qtcore/qvariant.html#toString">QVariant::toString</a>() (see the <a href="../qtcore/qvariant.html#toString">toString()</a> function documentation for details). In addition, the special <code>class</code> property is supported, for the name of the class.<p>This selector may also be used to test dynamic properties. For more information on customization using dynamic properties, refer to <a href="stylesheet-examples.html#customizing-using-dynamic-properties">Customizing Using Dynamic Properties</a>.</p>
<p>Instead of <code>=</code>, you can also use <code>~=</code> to test whether a Qt property of type <a href="../qtcore/qstringlist.html">QStringList</a> contains a given <a href="../qtcore/qstring.html">QString</a>.</p>
<p><b>Warning:</b> If the value of the Qt property changes after the style sheet has been set, it might be necessary to force a style sheet recomputation. One way to achieve this is to unset the style sheet and set it again.</p>
</td></tr>
<tr valign="top" class="even"><td >Class Selector</td><td ><code>.QPushButton</code></td><td >Matches instances of <a href="qpushbutton.html">QPushButton</a>, but not of its subclasses.<p>This is equivalent to <code>*[class~="QPushButton"]</code>.</p>
</td></tr>
<tr valign="top" class="odd"><td >ID <a name="id-selector"></a> Selector</td><td ><code>QPushButton#okButton</code></td><td >Matches all <a href="qpushbutton.html">QPushButton</a> instances whose <a href="../qtcore/qobject.html#objectName-prop">object name</a> is <code>okButton</code>.</td></tr>
<tr valign="top" class="even"><td >Descendant Selector</td><td ><code>QDialog QPushButton</code></td><td >Matches all instances of <a href="qpushbutton.html">QPushButton</a> that are descendants (children, grandchildren, etc.) of a <a href="qdialog.html">QDialog</a>.</td></tr>
<tr valign="top" class="odd"><td >Child Selector</td><td ><code>QDialog > QPushButton</code></td><td >Matches all instances of <a href="qpushbutton.html">QPushButton</a> that are direct children of a <a href="qdialog.html">QDialog</a>.</td></tr>
</table></div>
<a name="sub-controls"></a>
<h2 id="sub-controls">Sub-Controls</h2>
<p>For styling complex widgets, it is necessary to access subcontrols of the widget, such as the drop-down button of a <a href="qcombobox.html">QComboBox</a> or the up and down arrows of a <a href="qspinbox.html">QSpinBox</a>. Selectors may contain <i>subcontrols</i> that make it possible to restrict the application of a rule to specific widget subcontrols. For example:</p>
<pre class="cpp">
<span class="type"><a href="qcombobox.html">QComboBox</a></span><span class="operator">::</span>drop<span class="operator">-</span>down { image: url(dropdown<span class="operator">.</span>png) }
</pre>
<p>The above rule styles the drop-down button of all <a href="qcombobox.html">QComboBox</a>es. Although the double-colon (<code>::</code>) syntax is reminiscent of CSS3 Pseudo-Elements, Qt Sub-Controls differ conceptually from these and have different cascading semantics.</p>
<p>Sub-controls are always positioned with respect to another element - a reference element. This reference element could be the widget or another Sub-control. For example, the <a href="stylesheet-reference.html#drop-down-sub">::drop-down</a> of a <a href="qcombobox.html">QComboBox</a> is placed, by default, in the top right corner of the Padding rectangle of the <a href="qcombobox.html">QComboBox</a>. The <a href="stylesheet-reference.html#drop-down-sub">::drop-down</a> is placed, by default, in the Center of the Contents rectangle of the <a href="stylesheet-reference.html#drop-down-sub">::drop-down</a> Sub-control. See the <a href="stylesheet-reference.html#list-of-stylable-widgets">List of Stylable Widgets</a> below for the Sub-controls to use to style a widget and their default positions.</p>
<p>The origin rectangle to be used can be changed using the <a href="stylesheet-reference.html#subcontrol-origin-prop">subcontrol-origin</a> property. For example, if we want to place the drop-down in the margin rectangle of the <a href="qcombobox.html">QComboBox</a> instead of the default Padding rectangle, we can specify:</p>
<pre class="cpp">
<span class="type"><a href="qcombobox.html">QComboBox</a></span> {
margin<span class="operator">-</span>right: <span class="number">20px</span>;
}
<span class="type"><a href="qcombobox.html">QComboBox</a></span><span class="operator">::</span>drop<span class="operator">-</span>down {
subcontrol<span class="operator">-</span>origin: margin;
}
</pre>
<p>The alignment of the drop-down within the Margin rectangle is changed using <a href="stylesheet-reference.html#subcontrol-position-prop">subcontrol-position</a> property.</p>
<p>The <a href="stylesheet-reference.html#width-prop">width</a> and <a href="stylesheet-reference.html#height-prop">height</a> properties can be used to control the size of the Sub-control. Note that setting a <a href="stylesheet-reference.html#image-prop">image</a> implicitly sets the size of a Sub-control.</p>
<p>The relative positioning scheme (<a href="stylesheet-reference.html#position-prop">position</a> : relative), allows the position of the Sub-Control to be offset from its initial position. For example, when the <a href="qcombobox.html">QComboBox</a>'s drop-down button is pressed, we might like the arrow inside to be offset to give a "pressed" effect. To achieve this, we can specify:</p>
<pre class="cpp">
<span class="type"><a href="qcombobox.html">QComboBox</a></span><span class="operator">::</span>down<span class="operator">-</span>arrow {
image: url(down_arrow<span class="operator">.</span>png);
}
<span class="type"><a href="qcombobox.html">QComboBox</a></span><span class="operator">::</span>down<span class="operator">-</span>arrow:pressed {
position: relative;
top: <span class="number">1px</span>; left: <span class="number">1px</span>;
}
</pre>
<p>The absolute positioning scheme (<a href="stylesheet-reference.html#position-prop">position</a> : absolute), allows the position and size of the Sub-control to be changed with respect to the reference element.</p>
<p>Once positioned, they are treated the same as widgets and can be styled using the <a href="stylesheet-customizing.html#box-model">box model</a>.</p>
<p>See the <a href="stylesheet-reference.html#list-of-sub-controls">List of Sub-Controls</a> below for a list of supported sub-controls, and <a href="stylesheet-examples.html#customizing-the-qpushbutton-s-menu-indicator-sub-control">Customizing the QPushButton's Menu Indicator Sub-Control</a> for a realistic example.</p>
<p><b>Note: </b>With complex widgets such as <a href="qcombobox.html">QComboBox</a> and <a href="qscrollbar.html">QScrollBar</a>, if one property or sub-control is customized, <b>all</b> the other properties or sub-controls must be customized as well.</p><a name="pseudo-states"></a>
<h2 id="pseudo-states">Pseudo-States</h2>
<p>Selectors may contain <i>pseudo-states</i> that denote that restrict the application of the rule based on the widget's state. Pseudo-states appear at the end of the selector, with a colon (<code>:</code>) in between. For example, the following rule applies when the mouse hovers over a <a href="qpushbutton.html">QPushButton</a>:</p>
<pre class="cpp">
<span class="type"><a href="qpushbutton.html">QPushButton</a></span>:hover { color: white }
</pre>
<p>Pseudo-states can be negated using the exclamation operator. For example, the following rule applies when the mouse does not hover over a <a href="qradiobutton.html">QRadioButton</a>:</p>
<pre class="cpp">
<span class="type"><a href="qradiobutton.html">QRadioButton</a></span>:<span class="operator">!</span>hover { color: red }
</pre>
<p>Pseudo-states can be chained, in which case a logical AND is implied. For example, the following rule applies to when the mouse hovers over a checked <a href="qcheckbox.html">QCheckBox</a>:</p>
<pre class="cpp">
<span class="type"><a href="qcheckbox.html">QCheckBox</a></span>:hover:checked { color: white }
</pre>
<p>Negated Pseudo-states may appear in Pseudo-state chains. For example, the following rule applies when the mouse hovers over a <a href="qpushbutton.html">QPushButton</a> that is not pressed:</p>
<pre class="cpp">
<span class="type"><a href="qpushbutton.html">QPushButton</a></span>:hover:<span class="operator">!</span>pressed { color: blue; }
</pre>
<p>If needed, logical OR can be expressed using the comma operator:</p>
<pre class="cpp">
<span class="type"><a href="qcheckbox.html">QCheckBox</a></span>:hover<span class="operator">,</span> <span class="type"><a href="qcheckbox.html">QCheckBox</a></span>:checked { color: white }
</pre>
<p>Pseudo-states can appear in combination with subcontrols. For example:</p>
<pre class="cpp">
<span class="type"><a href="qcombobox.html">QComboBox</a></span><span class="operator">::</span>drop<span class="operator">-</span>down:hover { image: url(dropdown_bright<span class="operator">.</span>png) }
</pre>
<p>See the <a href="stylesheet-reference.html#list-of-pseudo-states">List of Pseudo-States</a> section below for the list of pseudo-states provided by Qt widgets.</p>
<a name="conflict-resolution"></a>
<h2 id="conflict-resolution">Conflict Resolution</h2>
<p>Conflicts arise when several style rules specify the same properties with different values. Consider the following style sheet:</p>
<pre class="cpp">
<span class="type"><a href="qpushbutton.html">QPushButton</a></span><span class="preprocessor">#okButton { color: gray }</span>
<span class="type"><a href="qpushbutton.html">QPushButton</a></span> { color: red }
</pre>
<p>Both rules match <a href="qpushbutton.html">QPushButton</a> instances called <code>okButton</code> and there is a conflict for the <code>color</code> property. To resolve this conflict, we must take into account the <i>specificity</i> of the selectors. In the above example, <code>QPushButton#okButton</code> is considered more specific than <code>QPushButton</code>, because it (usually) refers to a single object, not to all instances of a class.</p>
<p>Similarly, selectors with pseudo-states are more specific than ones that do not specify pseudo-states. Thus, the following style sheet specifies that a <a href="qpushbutton.html">QPushButton</a> should have white text when the mouse is hovering over it, otherwise red text:</p>
<pre class="cpp">
<span class="type"><a href="qpushbutton.html">QPushButton</a></span>:hover { color: white }
<span class="type"><a href="qpushbutton.html">QPushButton</a></span> { color: red }
</pre>
<p>Here's a tricky one:</p>
<pre class="cpp">
<span class="type"><a href="qpushbutton.html">QPushButton</a></span>:hover { color: white }
<span class="type"><a href="qpushbutton.html">QPushButton</a></span>:enabled { color: red }
</pre>
<p>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:</p>
<pre class="cpp">
<span class="type"><a href="qpushbutton.html">QPushButton</a></span>:enabled { color: red }
<span class="type"><a href="qpushbutton.html">QPushButton</a></span>:hover { color: white }
</pre>
<p>Alternatively, we can make the first rule more specific:</p>
<pre class="cpp">
<span class="type"><a href="qpushbutton.html">QPushButton</a></span>:hover:enabled { color: white }
<span class="type"><a href="qpushbutton.html">QPushButton</a></span>:enabled { color: red }
</pre>
<p>A similar issue arises in conjunction with Type Selectors. Consider the following example:</p>
<pre class="cpp">
<span class="type"><a href="qpushbutton.html">QPushButton</a></span> { color: red }
<span class="type"><a href="qabstractbutton.html">QAbstractButton</a></span> { color: gray }
</pre>
<p>Both rules apply to <a href="qpushbutton.html">QPushButton</a> instances (since <a href="qpushbutton.html">QPushButton</a> inherits <a href="qabstractbutton.html">QAbstractButton</a>) and there is a conflict for the <a href="stylesheet-reference.html#color-prop">color</a> property. Because <a href="qpushbutton.html">QPushButton</a> inherits <a href="qabstractbutton.html">QAbstractButton</a>, it might be tempting to assume that <code>QPushButton</code> is more specific than <code>QAbstractButton</code>. However, for style sheet computations, all Type Selectors have the same specificity, and the rule that appears last takes precedence. In other words, <a href="stylesheet-reference.html#color-prop">color</a> is set to <code>gray</code> for all <a href="qabstractbutton.html">QAbstractButton</a>s, including <a href="qpushbutton.html">QPushButton</a>s. If we really want <a href="qpushbutton.html">QPushButton</a>s to have red text, we can always reorder the rules.</p>
<p>For determining the specificity of a rule, Qt Style Sheets follow the <a href="http://www.w3.org/TR/REC-CSS2/cascade.html#specificity">CSS2 Specification</a>:</p>
<blockquote><p><i>A selector's specificity is calculated as follows:</i></p>
<ul>
<li><i>count the number of ID attributes in the selector (= a)</i></li>
<li><i>count the number of other attributes and pseudo-classes in the selector (= b)</i></li>
<li><i>count the number of element names in the selector (= c)</i></li>
<li><i>ignore pseudo-elements [i.e., <a href="stylesheet-reference.html#subcontrols">subcontrols</a>].</i></li>
</ul>
<p><i>Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.</i></p>
<p><i>Some examples:</i></p>
<pre class="cpp">
<span class="operator">*</span> {} <span class="comment">/* a=0 b=0 c=0 -> specificity = 0 */</span>
LI {} <span class="comment">/* a=0 b=0 c=1 -> specificity = 1 */</span>
UL LI {} <span class="comment">/* a=0 b=0 c=2 -> specificity = 2 */</span>
UL OL<span class="operator">+</span>LI {} <span class="comment">/* a=0 b=0 c=3 -> specificity = 3 */</span>
H1 <span class="operator">+</span> <span class="operator">*</span><span class="operator">[</span>REL<span class="operator">=</span>up<span class="operator">]</span>{} <span class="comment">/* a=0 b=1 c=1 -> specificity = 11 */</span>
UL OL LI<span class="operator">.</span>red {} <span class="comment">/* a=0 b=1 c=3 -> specificity = 13 */</span>
LI<span class="operator">.</span>red<span class="operator">.</span>level {} <span class="comment">/* a=0 b=2 c=1 -> specificity = 21 */</span>
<span class="preprocessor">#x34y {} /* a=1 b=0 c=0 -> specificity = 100 */</span>
</pre>
</blockquote>
<a name="cascading"></a>
<h2 id="cascading">Cascading</h2>
<p>Style sheets can be set on the <a href="qapplication.html">QApplication</a>, on parent widgets, and on child widgets. An arbitrary widget's effective style sheet is obtained by merging the style sheets set on the widget's ancestors (parent, grandparent, etc.), as well as any style sheet set on the <a href="qapplication.html">QApplication</a>.</p>
<p>When conflicts arise, the widget's own style sheet is always preferred to any inherited style sheet, irrespective of the specificity of the conflicting rules. Likewise, the parent widget's style sheet is preferred to the grandparent's, etc.</p>
<p>One consequence of this is that setting a style rule on a widget automatically gives it precedence over other rules specified in the ancestor widgets' style sheets or the <a href="qapplication.html">QApplication</a> style sheet. Consider the following example. First, we set a style sheet on the <a href="qapplication.html">QApplication</a>:</p>
<pre class="cpp">
qApp<span class="operator">-</span><span class="operator">></span>setStyleSheet(<span class="string">"QPushButton { color: white }"</span>);
</pre>
<p>Then we set a style sheet on a <a href="qpushbutton.html">QPushButton</a> object:</p>
<pre class="cpp">
myPushButton<span class="operator">-</span><span class="operator">></span>setStyleSheet(<span class="string">"* { color: blue }"</span>);
</pre>
<p>The style sheet on the <a href="qpushbutton.html">QPushButton</a> forces the <a href="qpushbutton.html">QPushButton</a> (and any child widget) to have blue text, in spite of the more specific rule set provided by the application-wide style sheet.</p>
<p>The result would have been the same if we had written</p>
<pre class="cpp">
myPushButton<span class="operator">-</span><span class="operator">></span>setStyleSheet(<span class="string">"color: blue"</span>);
</pre>
<p>except that if the <a href="qpushbutton.html">QPushButton</a> had children (which is unlikely), the style sheet would have no impact on them.</p>
<p>Style sheet cascading is a complex topic. Refer to the <a href="http://www.w3.org/TR/CSS2/cascade.html#cascade">CSS2 Specification</a> for the gory details. Be aware that Qt currently doesn't implement <code>!important</code>.</p>
<a name="inheritance"></a>
<h2 id="inheritance">Inheritance</h2>
<p>In classic CSS, when font and color of an item is not explicitly set, it gets automatically inherited from the parent. By default, when using Qt Style Sheets, a widget does <b>not</b> automatically inherit its font and color setting from its parent widget.</p>
<p>For example, consider a <a href="qpushbutton.html">QPushButton</a> inside a <a href="qgroupbox.html">QGroupBox</a>:</p>
<pre class="cpp">
qApp<span class="operator">-</span><span class="operator">></span>setStyleSheet(<span class="string">"QGroupBox { color: red; } "</span>);
</pre>
<p>The <a href="qpushbutton.html">QPushButton</a> does not have an explicit color set. Hence, instead of inheriting color of its parent <a href="qgroupbox.html">QGroupBox</a>, it has the system color. If we want to set the color on a <a href="qgroupbox.html">QGroupBox</a> and its children, we can write:</p>
<pre class="cpp">
qApp<span class="operator">-</span><span class="operator">></span>setStyleSheet(<span class="string">"QGroupBox, QGroupBox * { color: red; }"</span>);
</pre>
<p>In contrast, setting a font and palette using <a href="qwidget.html#font-prop">QWidget::setFont</a>() and <a href="qwidget.html#palette-prop">QWidget::setPalette</a>() propagates to child widgets.</p>
<p>If you would prefer that the font and palette propagate to child widgets, you can set the <a href="../qtcore/qt.html#ApplicationAttribute-enum">Qt::AA_UseStyleSheetPropagationInWidgetStyles</a> flag, like this:</p>
<p>Usage:</p>
<pre class="cpp">
<span class="type"><a href="../qtcore/qcoreapplication.html">QCoreApplication</a></span><span class="operator">::</span>setAttribute(<span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>AA_UseStyleSheetPropagationInWidgetStyles<span class="operator">,</span> <span class="keyword">true</span>);
</pre>
<p>When the widget-style font and palette propagation is enabled, font and palette changes made through Qt Style Sheets will behave as though the user had manually called the corresponding <a href="qwidget.html#palette-prop">QWidget::setPalette</a>() and <a href="qwidget.html#font-prop">QWidget::setFont</a>() methods on all of the QWidgets targeted by the style sheet. If this would have caused propagation in C++, it will cause propagation in style sheets and visa versa.</p>
<a name="widgets-inside-c-namespaces"></a>
<h2 id="widgets-inside-c-namespaces">Widgets Inside C++ Namespaces</h2>
<p>The Type Selector can be used to style widgets of a particular type. For example,</p>
<pre class="cpp">
<span class="keyword">class</span> MyPushButton : <span class="keyword">public</span> <span class="type"><a href="qpushbutton.html">QPushButton</a></span> {
<span class="comment">// ...</span>
}
<span class="comment">// ...</span>
qApp<span class="operator">-</span><span class="operator">></span>setStyleSheet(<span class="string">"MyPushButton { background: yellow; }"</span>);
</pre>
<p>Qt Style Sheet uses QObject::className() of the widget to determine when to apply the Type Selector. When custom widgets are inside namespaces, the QObject::className() returns <namespace>::<classname>. This conflicts with the syntax for <a href="stylesheet-syntax.html#sub-controls">Sub-Controls</a>. To overcome this problem, when using the Type Selector for widgets inside namespaces, we must replace the "::" with "--". For example,</p>
<pre class="cpp">
<span class="keyword">namespace</span> ns {
<span class="keyword">class</span> MyPushButton : <span class="keyword">public</span> <span class="type"><a href="qpushbutton.html">QPushButton</a></span> {
<span class="comment">// ...</span>
}
}
<span class="comment">// ...</span>
qApp<span class="operator">-</span><span class="operator">></span>setStyleSheet(<span class="string">"ns--MyPushButton { background: yellow; }"</span>);
</pre>
<a name="setting-qobject-properties"></a>
<h2 id="setting-qobject-properties">Setting QObject Properties</h2>
<p>From 4.3 and above, any designable <a href="../qtcore/qobject.html#Q_PROPERTY">Q_PROPERTY</a> can be set using the qproperty-<property name> syntax.</p>
<p>For example,</p>
<pre class="cpp">
MyLabel { qproperty<span class="operator">-</span>pixmap: url(pixmap<span class="operator">.</span>png); }
MyGroupBox { qproperty<span class="operator">-</span>titleColor: rgb(<span class="number">100</span><span class="operator">,</span> <span class="number">200</span><span class="operator">,</span> <span class="number">100</span>); }
<span class="type"><a href="qpushbutton.html">QPushButton</a></span> { qproperty<span class="operator">-</span>iconSize: <span class="number">20px</span> <span class="number">20px</span>; }
</pre>
<p>If the property references an enum declared with Q_ENUMS, you should reference its constants by name, i.e., not their numeric value.</p>
</div>
<!-- @@@stylesheet-syntax.html -->
<p class="naviNextPrevious footerNavi">
<a class="prevPage" href="stylesheet.html">Qt Style Sheets</a>
<span class="naviSeparator"> ◦ </span>
<a class="nextPage" href="stylesheet-designer.html">Qt Designer Integration</a>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2017 The Qt Company Ltd.
Documentation contributions included herein are the copyrights of
their respective owners.<br> The documentation provided herein is licensed under the terms of the <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation License version 1.3</a> as published by the Free Software Foundation.<br> Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. </p>
</div>
</body>
</html>
distrib
>
Mageia
>
6
>
armv5tl
>
media
>
core-updates
>
by-pkgid
>
768f7d9f703884aa2562bf0a651086df
>
files
>
4659
