Skip to content

Commit c1fb5df

Browse files
committed
words
1 parent f4cfbc8 commit c1fb5df

File tree

1 file changed

+13
-8
lines changed

1 file changed

+13
-8
lines changed

docs/guide/CSS.md

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -195,37 +195,42 @@ Let's look at the selectors supported by Textual CSS.
195195

196196
### Type selector
197197

198-
The _type_ selector matches the name of the (Python) class. For example, the following widget can be matched with a `Button` selector:
198+
The _type_ selector matches the name of the (Python) class.
199+
Consider the following widget class:
199200

200201
```python
201202
from textual.widgets import Static
202203

203-
class Button(Static):
204+
class Alert(Static):
204205
pass
205206
```
206207

207-
The following rule applies a border to this widget:
208+
Alert widgets may be styled with the following CSS (to give them a red border):
208209

209210
```css
210-
Button {
211-
border: solid blue;
211+
Alert {
212+
border: solid red;
212213
}
213214
```
214215

215-
The type selector will also match a widget's base classes. Consequently, a `Static` selector will also style the button because the `Button` Python class extends `Static`.
216+
The type selector will also match a widget's base classes.
217+
Consequently, a `Static` selector will also style the button because the `Alert` (Python) class extends `Static`.
216218

217219
```css
218220
Static {
219221
background: blue;
220-
border: rounded white;
222+
border: rounded green;
221223
}
222224
```
223225

224226
!!! note
225227

226228
The fact that the type selector matches base classes is a departure from browser CSS which doesn't have the same concept.
227229

228-
You may have noticed that the `border` rule exists in both Static and Button. When this happens, Textual will use the most recently defined sub-class within a list of bases. So Button wins over Static, and Static wins over Widget (the base class of all widgets). Hence if both rules were in a stylesheet, the buttons would be "solid blue" and not "rounded white".
230+
You may have noticed that the `border` rule exists in both `Static` and `Alert`.
231+
When this happens, Textual will use the most recently defined sub-class.
232+
So `Alert` wins over `Static`, and `Static` wins over `Widget` (the base class of all widgets).
233+
Hence if both rules were in a stylesheet, `Alert` widgets would have a "solid red" border and not a "rounded green" border.
229234

230235
### ID selector
231236

0 commit comments

Comments
 (0)