{"id":445,"date":"2026-10-14T14:00:02","date_gmt":"2026-10-14T14:00:02","guid":{"rendered":"https:\/\/html-editor-online.com\/blog?p=445"},"modified":"2026-10-14T14:00:02","modified_gmt":"2026-10-14T14:00:02","slug":"css-where-specificity-rule-not-applying","status":"publish","type":"post","link":"https:\/\/html-editor-online.com\/blog\/css-where-specificity-rule-not-applying\/","title":{"rendered":"CSS :where Specificity Rule Not Applying: Why footer a Wins"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">If you are seeing a CSS :where specificity rule not applying to a link, the rule is usually applying fine. It matches the element, but it loses the cascade for the competing declaration. In <code>:where(#content) a<\/code>, the <code>:where()<\/code> part contributes zero specificity, even though it contains an ID. Only the trailing <code>a<\/code> counts, which gives 0-0-1. A plain <code>footer a<\/code> rule scores 0-0-2 and wins the <code>color<\/code> conflict.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The input here is a small stylesheet with two rules that match the same link. The useful outcome is being able to predict the winner and choose a deliberate fix. The behavior described follows the Selectors Level 4 draft and MDN, both checked on October 4, 2026. You can write and preview the CSS in the <a href=\"https:\/\/html-editor-online.com\/editors\/css\" title=\"CSS Editor\">CSS Editor<\/a>, but its preview uses a fixed sample page, so I will also show where to test with your own markup.<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li class=\"\"><a href=\"#why-the-where-rule-matches-but-still-loses-1\">Why the :where() rule matches but still loses<\/a><\/li><li class=\"\"><a href=\"#a-minimal-example-where-both-selectors-match-2\">A minimal example where both selectors match<\/a><\/li><li class=\"\"><a href=\"#scoring-a-css-where-specificity-rule-not-applying-3\">Scoring a CSS :where specificity rule not applying<\/a><\/li><li class=\"\"><a href=\"#why-moving-the-rule-or-adding-important-is-the-wrong-first-fix-4\">Why moving the rule or adding !important is the wrong first fix<\/a><\/li><li class=\"\"><a href=\"#fixing-a-css-where-specificity-rule-not-applying-on-purpose-5\">Fixing a CSS :where specificity rule not applying on purpose<\/a><\/li><li class=\"\"><a href=\"#how-to-test-it-in-the-css-editor-and-html-code-editor-6\">How to test it in the CSS Editor and HTML Code Editor<\/a><\/li><li class=\"\"><a href=\"#browser-support-and-where-the-zero-score-stops-mattering-7\">Browser support and where the zero score stops mattering<\/a><\/li><li class=\"\"><a href=\"#frequently-asked-questions\">Frequently asked questions<\/a><\/li><li class=\"\"><a href=\"#next-steps\">Next steps<\/a><\/li><li class=\"\"><a href=\"#sources\">Sources and further reading<\/a><\/li><\/ul><\/nav><\/div>\n\n\n<div class=\"wp-block-image heo-auto-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/css-where-specificity-rule-not-applying-image-1-425-1-0bf5c4b32b41ddd0-1024x576.jpg\" alt=\"Two balance scales illustrating how a heavy-looking selector can carry zero weight in the cascade\" class=\"wp-image-448\" srcset=\"https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/css-where-specificity-rule-not-applying-image-1-425-1-0bf5c4b32b41ddd0-1024x576.jpg 1024w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/css-where-specificity-rule-not-applying-image-1-425-1-0bf5c4b32b41ddd0-300x169.jpg 300w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/css-where-specificity-rule-not-applying-image-1-425-1-0bf5c4b32b41ddd0-768x432.jpg 768w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/css-where-specificity-rule-not-applying-image-1-425-1-0bf5c4b32b41ddd0-747x420.jpg 747w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/css-where-specificity-rule-not-applying-image-1-425-1-0bf5c4b32b41ddd0-150x84.jpg 150w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/css-where-specificity-rule-not-applying-image-1-425-1-0bf5c4b32b41ddd0-696x392.jpg 696w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/css-where-specificity-rule-not-applying-image-1-425-1-0bf5c4b32b41ddd0-1068x601.jpg 1068w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/css-where-specificity-rule-not-applying-image-1-425-1-0bf5c4b32b41ddd0.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"why-the-where-rule-matches-but-still-loses-1\">Why the :where() rule matches but still loses<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Two separate questions are involved, and mixing them up causes most of the confusion. The first is matching: does this selector apply to this element? The second is the cascade: when two matching rules set the same property on the same element, which declaration wins?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The selector <code>:where(#content) a<\/code> matches any link that has an ancestor with <code>id=\"content\"<\/code>. The ID still narrows which links qualify. What it does not do is add weight. The <a href=\"https:\/\/www.w3.org\/TR\/selectors-4\/\" title=\"Selectors Level 4\" target=\"_blank\" rel=\"noopener\">Selectors Level 4<\/a> draft defines <code>:where()<\/code> so that its specificity is always replaced by zero, regardless of what the selector list inside it contains. The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Guides\/Cascade\/Specificity\" title=\"Specificity - CSS | MDN\" target=\"_blank\" rel=\"noopener\">MDN specificity guide<\/a> describes the same behavior.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">That leaves the type selector <code>a<\/code>, worth 0-0-1. The competing rule <code>footer a<\/code> has two type selectors, so it is worth 0-0-2. The second one wins. The red rule is not ignored in general. On any link outside the footer, nothing competes with it, so the link still turns red.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When you debug, replace the sentence &#8220;the rule is not applying&#8221; with &#8220;the rule matches, but another matching declaration outranks it.&#8221; That wording points you at the cascade instead of at the selector syntax.<\/p>\n\n\n<div class=\"wp-block-image heo-auto-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/css-where-specificity-rule-not-applying-image-2-425-2-67bba8186377a02f-1024x576.jpg\" alt=\"Abstract page layout with one red link and one blue link representing two competing CSS rules\" class=\"wp-image-450\" srcset=\"https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/css-where-specificity-rule-not-applying-image-2-425-2-67bba8186377a02f-1024x576.jpg 1024w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/css-where-specificity-rule-not-applying-image-2-425-2-67bba8186377a02f-300x169.jpg 300w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/css-where-specificity-rule-not-applying-image-2-425-2-67bba8186377a02f-768x432.jpg 768w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/css-where-specificity-rule-not-applying-image-2-425-2-67bba8186377a02f-747x420.jpg 747w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/css-where-specificity-rule-not-applying-image-2-425-2-67bba8186377a02f-150x84.jpg 150w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/css-where-specificity-rule-not-applying-image-2-425-2-67bba8186377a02f-696x392.jpg 696w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/css-where-specificity-rule-not-applying-image-2-425-2-67bba8186377a02f-1068x601.jpg 1068w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/css-where-specificity-rule-not-applying-image-2-425-2-67bba8186377a02f.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"a-minimal-example-where-both-selectors-match-2\">A minimal example where both selectors match<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Here is markup in which the footer link matches both rules. The footer sits inside the element with the ID, and a second link sits outside the footer for contrast.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;main id=&quot;content&quot;&gt;\n  &lt;p&gt;&lt;a href=&quot;\/guide&quot;&gt;Guide link&lt;\/a&gt;&lt;\/p&gt;\n  &lt;footer&gt;\n    &lt;a href=&quot;\/top&quot;&gt;Back to top&lt;\/a&gt;\n  &lt;\/footer&gt;\n&lt;\/main&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">And the stylesheet:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">:where(#content) a {\n  color: red;\n}\n\nfooter a {\n  color: blue;\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The &#8220;Back to top&#8221; link matches both selectors, but it renders blue. The &#8220;Guide link&#8221; matches only the first rule, so it renders red. Reversing the order of the two rules does not change either result, because the footer rule has the higher specificity.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This outcome assumes both declarations share the same cascade origin, the same importance and the same cascade layer. Those qualifications matter, and I return to them below. For now, notice that the output tells you the rule is working: the red paragraph link proves the <code>:where()<\/code> selector matched.<\/p>\n\n\n<div class=\"wp-block-image heo-auto-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad17a1b7f315&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad17a1b7f315\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/css-where-specificity-rule-not-applying-image-3-425-3-5ee9343d0953029c-1024x576.jpg\" alt=\"Three columns of different heights representing the ranked parts of CSS specificity\" class=\"wp-image-452\" srcset=\"https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/css-where-specificity-rule-not-applying-image-3-425-3-5ee9343d0953029c-1024x576.jpg 1024w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/css-where-specificity-rule-not-applying-image-3-425-3-5ee9343d0953029c-300x169.jpg 300w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/css-where-specificity-rule-not-applying-image-3-425-3-5ee9343d0953029c-768x432.jpg 768w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/css-where-specificity-rule-not-applying-image-3-425-3-5ee9343d0953029c-747x420.jpg 747w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/css-where-specificity-rule-not-applying-image-3-425-3-5ee9343d0953029c-150x84.jpg 150w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/css-where-specificity-rule-not-applying-image-3-425-3-5ee9343d0953029c-696x392.jpg 696w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/css-where-specificity-rule-not-applying-image-3-425-3-5ee9343d0953029c-1068x601.jpg 1068w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/css-where-specificity-rule-not-applying-image-3-425-3-5ee9343d0953029c.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"scoring-a-css-where-specificity-rule-not-applying-3\">Scoring a CSS :where specificity rule not applying<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Specificity is usually written as three numbers: IDs, then classes, attributes and pseudo-classes, then type selectors and pseudo-elements. You compare the columns from left to right. A single ID beats any number of classes, and a single class beats any number of type selectors. It is not a base-10 number, so 0-0-11 does not beat 0-1-0.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Selector<\/th><th>Specificity<\/th><th>Why<\/th><\/tr><\/thead><tbody><tr><td><code>:where(#content) a<\/code><\/td><td>0-0-1<\/td><td><code>:where()<\/code> counts as zero, so only <code>a<\/code> is scored.<\/td><\/tr><tr><td><code>footer a<\/code><\/td><td>0-0-2<\/td><td>Two type selectors.<\/td><\/tr><tr><td><code>#content a<\/code><\/td><td>1-0-1<\/td><td>One ID and one type selector.<\/td><\/tr><tr><td><code>:is(#content) a<\/code><\/td><td>1-0-1<\/td><td><code>:is()<\/code> takes the specificity of its most specific argument.<\/td><\/tr><tr><td><code>:where(#content) footer a<\/code><\/td><td>0-0-2<\/td><td>Only <code>footer<\/code> and <code>a<\/code> count, which ties with <code>footer a<\/code>.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Read the first two rows together and the paradox disappears. The ID is present in the first selector, but the scoring ignores it. The footer rule is simply heavier: 0-0-2 beats 0-0-1 in the last column.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>:is()<\/code> row is the useful contrast. Both pseudo-classes accept a selector list and match the same elements, but <code>:is()<\/code> keeps the weight of its argument while <code>:where()<\/code> drops it to zero. That is the whole difference between them, and it is why swapping one for the other can change which declaration wins.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The last row shows a tie. When two matching selectors have the same specificity, source order decides, and the later rule wins. That is the only situation where moving a rule up or down changes the outcome.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"why-moving-the-rule-or-adding-important-is-the-wrong-first-fix-4\">Why moving the rule or adding !important is the wrong first fix<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A common reaction is to move the weaker rule later in the file. That does nothing here, because source order is only consulted when everything ranked above it ties. Specificity ranks higher than order, and 0-0-1 against 0-0-2 is not a tie.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Adding <code>!important<\/code> can force a result, but it changes the importance of the declaration and makes the next override harder. I would not reach for it as a default fix. Treat it as a deliberate decision, not a patch for a specificity surprise.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There are also cascade factors that sit above specificity. Before specificity is even compared, origin, importance and cascade layers can already decide the winner. A declaration in a higher-priority layer can beat a rule with a much higher selector score, and an important declaration reverses the usual ordering. The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Guides\/Cascade\/Introduction\" title=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Guides\/Cascade\/Introduction\" target=\"_blank\" rel=\"noopener\">MDN cascade introduction<\/a> lays out these steps. That is why my demonstration says the footer link is blue &#8220;assuming the same origin, importance and layer.&#8221;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The general debugging habit is the same one that helps with other &#8220;my declaration is ignored&#8221; problems, such as a <a href=\"https:\/\/html-editor-online.com\/blog\/why-flexbox-card-wont-shrink-long-url\/\" title=\"Why Flexbox Card Wont Shrink Long URL\">flexbox card that will not shrink around a long URL<\/a>. In both cases the declaration exists, and some other rule or default constraint takes precedence. Find the competing rule first, then decide whether to change it or accept it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"fixing-a-css-where-specificity-rule-not-applying-on-purpose-5\">Fixing a CSS :where specificity rule not applying on purpose<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Which fix is correct depends on what you want the red rule to mean. There are three honest choices.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Make the ID rule outrank footer links.<\/strong> If the content area really should override footer styling, use a selector that counts the ID. <code>#content a<\/code> scores 1-0-1 and beats 0-0-2. Do this only when higher specificity is intentional, because every later override now has to match or exceed it.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">#content a {\n  color: red;\n}\n\nfooter a {\n  color: blue;\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">With this stylesheet, the footer link inside <code>#content<\/code> is red, because 1-0-1 outranks 0-0-2.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Keep the low-specificity default.<\/strong> The reason to write <code>:where(#content) a<\/code> is that it gives you an easily overridden baseline. If the footer is supposed to be blue, the original CSS is already correct and the footer rule is doing its job. Accepting that result is a legitimate fix.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Create a deliberate tie.<\/strong> A rule like <code>:where(#content) footer a<\/code> scores 0-0-2, which ties with <code>footer a<\/code>. The later rule then wins. This works, but it relies on source order, so it is more fragile than choosing a clear score.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can also swap in <code>:is(#content) a<\/code>, which scores 1-0-1 like the ID version. Choose between <code>:is()<\/code> and <code>#content<\/code> for readability, not for a different score.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-test-it-in-the-css-editor-and-html-code-editor-6\">How to test it in the CSS Editor and HTML Code Editor<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The CSS Editor offers syntax highlighting, property auto-completion, a live preview and beautify or minify. The preview renders on a fixed sample page. That page has a link, but it has no <code>#content<\/code> element and no <code>footer<\/code>, so the demonstration selectors cannot reproduce the conflict there by themselves. The editor also does not lint CSS, although some unknown property names may receive error coloring.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For a test that needs your own markup, use the <a href=\"https:\/\/html-editor-online.com\/editors\/html\" title=\"HTML Code Editor\">HTML Code Editor<\/a>. It has a sandboxed live preview and no validation. Put the markup and a <code>&lt;style&gt;<\/code> block in one document:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!doctype html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n&lt;head&gt;\n  &lt;meta charset=&quot;utf-8&quot;&gt;\n  &lt;title&gt;Specificity test&lt;\/title&gt;\n  &lt;style&gt;\n    :where(#content) a { color: red; }\n    footer a { color: blue; }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;main id=&quot;content&quot;&gt;\n    &lt;p&gt;&lt;a href=&quot;\/guide&quot;&gt;Guide link&lt;\/a&gt;&lt;\/p&gt;\n    &lt;footer&gt;&lt;a href=&quot;\/top&quot;&gt;Back to top&lt;\/a&gt;&lt;\/footer&gt;\n  &lt;\/main&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Paste the document into the editor and open the live preview.<\/li>\n\n\n\n<li>Confirm that &#8220;Guide link&#8221; is red and &#8220;Back to top&#8221; is blue.<\/li>\n\n\n\n<li>Swap the two CSS rules and confirm nothing changes.<\/li>\n\n\n\n<li>Change the first selector to <code>#content a<\/code> and confirm both links are now red.<\/li>\n\n\n\n<li>Open your browser&#8217;s developer tools on the footer link and look at the styles pane. The losing declaration is normally shown crossed out, which confirms a cascade loss rather than a selector mismatch.<\/li>\n\n\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Because neither editor lints, a mistyped selector looks the same as a rule that lost on specificity. To separate the two, temporarily delete the <code>footer a<\/code> rule. If the link turns red, the <code>:where()<\/code> rule matched all along and the cascade was the problem.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If your stylesheet is crowded, run it through the <a href=\"https:\/\/html-editor-online.com\/tools\/css_beautifier\" title=\"CSS Beautifier\">CSS Beautifier<\/a> first so each selector sits on its own line before you compare scores. A beautifier improves layout only. It does not repair invalid CSS or check which rule wins. If you later minify, compare the output with the source, as shown in the guide on a <a href=\"https:\/\/html-editor-online.com\/blog\/css-minifier-removes-space-before-focus\/\" title=\"CSS Minifier Removes Space Before Focus\">CSS minifier removing space before focus selectors<\/a>, and keep the readable original.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"browser-support-and-where-the-zero-score-stops-mattering-7\">Browser support and where the zero score stops mattering<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">MDN currently labels <code>:where()<\/code> as Baseline Widely available and says it has worked across browsers since January 2021, checked October 4, 2026. You can read how that label is defined on the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Baseline\/Compatibility\" title=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Baseline\/Compatibility\" target=\"_blank\" rel=\"noopener\">MDN Baseline compatibility page<\/a>. That is a statement about current mainstream browsers. It does not establish support in every older browser or embedded web view.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This matters for fallbacks. A browser that does not recognize the pseudo-class treats the selector as invalid and discards the whole rule, so the link would not turn red at all. If you must support old environments, check your audience before relying on <code>:where()<\/code> for essential styling.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Also remember what this article does not cover. Specificity explains conflicts between matching declarations for the same property on the same element. It does not tell you whether your CSS is valid, whether the markup is accessible, or whether a color has enough contrast. A clean preview proves only that the result looks as intended in that browser at that moment.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"frequently-asked-questions\">Frequently asked questions<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-1\">Does :where() ever add specificity?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">No. The specificity of a :where() pseudo-class is always zero, whatever selector list it contains. Only the selectors outside it are scored. Selectors Level 4 defines this, and MDN describes it in its specificity guide.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-2\">Does the ID inside :where(#content) still matter?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Yes, for matching. The rule still applies only to elements inside an element with that ID. What the ID does not do is raise the specificity, so it will not help the rule beat a competing selector such as footer a.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-3\">What is the difference between :is() and :where()?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Both accept a selector list and match the same elements. :is() takes the specificity of its most specific argument, so :is(#content) a scores 1-0-1. :where() always scores zero, so :where(#content) a scores 0-0-1. Choose :where() for easily overridden defaults and :is() when the weight should count.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-4\">Will placing the :where() rule after footer a fix it?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">No. Source order only decides between selectors with equal specificity. Here the scores are 0-0-1 and 0-0-2, so the footer rule wins regardless of order. Order matters only when you create a tie, such as :where(#content) footer a against footer a.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-5\">Should I use !important to make the rule win?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">I would not use it as the default fix. It changes declaration importance and makes later overrides harder. First decide whether the red rule should have higher specificity, in which case #content a is clearer, or whether the footer override is intended.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-6\">Why would anyone write :where(#content) a at all?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">It lets you scope a rule to a region of the page while keeping it easy to override. Because the scope adds no specificity, a later single class or a more specific element rule can change the result without a specificity fight. That suits base styles and defaults.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-7\">Can the CSS Editor show me which rule wins?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Not for this example by itself. Its live preview renders your CSS on a fixed sample page with a link but no #content element or footer, and it does not lint. Use the HTML Code Editor with your own markup and a style block, then confirm in your browser&#8217;s developer tools.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"next-steps\">Next steps<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A CSS :where specificity rule not applying is almost always a cascade result, not a broken selector. The ID inside <code>:where(#content)<\/code> limits which links match but adds nothing to the score, so <code>footer a<\/code> at 0-0-2 beats <code>:where(#content) a<\/code> at 0-0-1 in either source order. Decide whether you want that low-priority default, or switch to <code>#content a<\/code> or <code>:is(#content) a<\/code> and accept the higher score.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Your next step: paste the test document above into the HTML Code Editor, delete the footer rule to prove the match, then restore it and try each fix. For broader context on choosing tools for this kind of work, read about <a href=\"https:\/\/html-editor-online.com\/blog\/css-editors-web-development\/\" title=\"CSS Editors Web Development\">CSS editors in modern web development<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Related tools and resources on HTML Editor Online:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/html-editor-online.com\/editors\/css\">CSS Editor<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/html-editor-online.com\/blog\/css-editors-web-development\/\">CSS Editors Web Development<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/html-editor-online.com\/blog\/why-flexbox-card-wont-shrink-long-url\/\">Why Flexbox Card Wont Shrink Long URL<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/html-editor-online.com\/editors\/html\">HTML Code Editor<\/a><\/li>\n\n\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"sources\">Sources and further reading<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.w3.org\/TR\/selectors-4\/\" target=\"_blank\" rel=\"noopener\">Selectors Level 4<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Guides\/Cascade\/Specificity\" target=\"_blank\" rel=\"noopener\">Specificity &#8211; CSS | MDN<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Baseline\/Compatibility\" target=\"_blank\" rel=\"noopener\">https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Baseline\/Compatibility<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Guides\/Cascade\/Introduction\" target=\"_blank\" rel=\"noopener\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Guides\/Cascade\/Introduction<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/html-editor-online.com\/editors\/css\">CSS Editor &#8211; Free Online CSS Editor | HTML Editor Online<\/a><\/li>\n\n\n<\/ul>\n\n\n","protected":false},"excerpt":{"rendered":"<p>A rule written as :where(#content) a can match a link and still lose to footer a. This guide scores both selectors, explains why order and !important are the wrong first fixes, and shows how to test the result.<\/p>\n","protected":false},"author":1,"featured_media":446,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[119,120,60,69,118,121],"class_list":["post-445","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-editor","tag-css-where","tag-css-cascade","tag-css-debugging","tag-css-selectors","tag-css-specificity","tag-selectors-level-4"],"_links":{"self":[{"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/posts\/445","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/comments?post=445"}],"version-history":[{"count":5,"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/posts\/445\/revisions"}],"predecessor-version":[{"id":537,"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/posts\/445\/revisions\/537"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/media\/446"}],"wp:attachment":[{"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/media?parent=445"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/categories?post=445"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/tags?post=445"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}