4 replies

How to target a tag that has no parents?

I am playing with

userContent.css

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)

@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 } }

@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

:root > svg

, but that doesn't work. ¿Anyone got a clue

KP-C

Kevin Powell - Community•2y ago•

4 replies

dys 🐙

How to target a tag that has no parents?

I am playing with

userContent.css

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)

@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 } }

@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

:root > svg

, but that doesn't work. ¿Anyone got a clue

How to target a tag that has no parents?

Similar Threads

How to target a tag that has no parents?

Similar Threads

Similar Threads

Similar Threads