diff --git a/docs/guide/CSS.md b/docs/guide/CSS.md index eef68e42c..371a3c2fd 100644 --- a/docs/guide/CSS.md +++ b/docs/guide/CSS.md @@ -349,11 +349,11 @@ We can use the following CSS to style all buttons which have a parent with an ID ## Specificity -It is possible that several selectors match a given widget. If the same rule is applied by more than one selector, then Textual needs a way to decide which rule _wins_. It does this by following these rules: +It is possible that several selectors match a given widget. If the same rule is applied by more than one selector then Textual needs a way to decide which rule _wins_. It does this by following these rules: -- The selector with the most IDs wins. For instance `"#next"` beats `".button"` and `#dialog #next` beats `#next`. If the selectors have the same number of IDs then move to the next rule. +- The selector with the most IDs wins. For instance `"#next"` beats `.button` and `#dialog #next` beats `#next`. If the selectors have the same number of IDs then move to the next rule. -- The selector with the most class names wins. For instance `".button.success"` beats `".success"`. For the purposes of specificity, pseudo classes are treated the same as regular class names, so ".button:hover" counts as _2_ class names. If the selectors have the same number of class names then move to the next rule. +- The selector with the most class names wins. For instance `.button.success` beats `.success`. For the purposes of specificity, pseudo classes are treated the same as regular class names, so ".button:hover" counts as _2_ class names. If the selectors have the same number of class names then move to the next rule. - The selector with the most types wins. For instance `Container Button` beats `Button`.