From 48a4ec92a0ebeb6e431a32a536bfc17b8f8cab21 Mon Sep 17 00:00:00 2001 From: Will McGugan Date: Sun, 14 Aug 2022 15:47:52 +0100 Subject: [PATCH] specificity docs --- docs/guide/CSS.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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`.