docs(styling guide): add explanation on specificity

This commit is contained in:
Schweber 2023-10-14 02:46:00 +00:00 committed by Jake Stanger
parent c2306d6680
commit a768164515
No known key found for this signature in database
GPG Key ID: C51FC8F9CB0BEA61

View File

@ -22,7 +22,7 @@ Information on styling individual modules can be found on their pages in the sid
| `.widget` | Any widget. |
| `.popup` | Any popup box. |
Every widget can be selected using a `kebab-case` class name matching its name.
Every Ironbar widget can be selected using a `kebab-case` class name matching its name.
You can also target popups by prefixing `popup-` to the name. For example, you can use `.clock` and `.popup-clock` respectively.
Setting the `name` option on a widget allows you to target that specific instance using `#name`.
@ -31,6 +31,13 @@ You can also add additional classes to re-use styles. In both cases, `popup-` is
You can also target all GTK widgets of a certain type directly using their name. For example, `label` will select all labels, and `button:hover` will select the hover state on *all* buttons.
These names are all lower case with no separator, so `MenuBar` -> `menubar`.
> [!NOTE]
> If an entry takes no effect you might have to use a more specific selector.
> For example, attempting to set text size on `.popup-clipboard .item` will likely have no effect.
> Instead, you can target the more specific `.popup-clipboard .item label`.
Running `ironbar inspect` can be used to find out how to address an element.
GTK CSS does not support custom properties, but it does have its own custom `@define-color` syntax which you can use for re-using colours:
```css