How to target a tag that has no parents?
I am playing with
userContent.css in Firefox which allows me to inject a stylesheet into every page.
I have several SVGs that include a @media (prefers-color-scheme: dark) rule to display differently on dark monitors. My issue is the default background for a SVG opened by itself is "transparent", but is effectively white.
I tried adding a @media (prefers-color-scheme: dark) { svg { background-color: #0008 } } style, which worked, but it affects every SVG on every page, & generally makes the browser look crappy.
I want to just target the background of SVGs when they are the root of the DOM. I tried :root > svg, but that doesn't work. ¿Anyone got a clue❔4 Replies
tried
html > svg instead ??I'm opening the SVG directly, so there's no
html tag.if they cant be targetted, then you're sol
you may be able to target based on the children of the svg, or based on location, but that's very "brittle" and breaks easily
I must admit that I don't fully understand the use case.
However, you could try something like using
:not( ) and :where() to select the svgs which are not children of other elements:
Obviously you could limit or extend the parent selectors accordingly.