From 31a1be2bc8203bb1d2e0a13d8b79abfe587acee7 Mon Sep 17 00:00:00 2001 From: Deepu G Date: Sun, 24 Jul 2022 16:13:04 +0530 Subject: [PATCH] Clearer explanation of the weird behavior of :not() pseudo-class when used with descendant combinators. --- files/en-us/web/css/_colon_not/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/_colon_not/index.md b/files/en-us/web/css/_colon_not/index.md index 9b5bf8b7d2d7cef..bd1f497dfb03560 100644 --- a/files/en-us/web/css/_colon_not/index.md +++ b/files/en-us/web/css/_colon_not/index.md @@ -42,7 +42,7 @@ There are several unusual effects and outcomes when using `:not()` that you shou - This pseudo-class can increase the [specificity](/en-US/docs/Web/CSS/Specificity) of a rule. For example, `#foo:not(#bar)` will match the same element as the simpler `#foo`, but has the higher specificity of two `id` selectors. - The specificity of the `:not()` pseudo-class is replaced by the specificity of the most specific selector in its comma-separated argument of selectors; providing the same specificity as if it had been written [`:not(:is(argument))`](/en-US/docs/Web/CSS/:is). - `:not(.foo)` will match anything that isn't `.foo`, _including {{HTMLElement("html")}} and {{HTMLElement("body")}}._ -- This selector only applies to one element; you cannot use it to exclude all ancestors. For instance, `body :not(table) a` will still apply to links inside a {{HTMLElement("table")}}, since {{HTMLElement("tr")}} will match with the `:not()` part of the selector. +- The `:not()` pseudo-class may not work as expected when used with [descendant combinators](/en-US/docs/Web/CSS/Descendant_combinator). For instance, if you do `body :not(table) a`, instead of excluding all the links that are the direct or indirect children of {{HTMLElement("table")}} like you would expect, it excludes only the links that are direct children of {{HTMLElement("table")}}. That means any links you may have inside a {{HTMLElement("tr")}} or {{HTMLElement("td")}} will still be selected. - You can negate several selectors at the same time. Example: `:not(.foo, .bar)` is equivalent to `:not(.foo):not(.bar)`. ## Examples