How do I use the CSS Grouping selector for several children

I want to set the style of

a, a:hover, a:visitied

a, a:hover, a:visitied

and

a:active

a:active

, in the nav section of my site separately from the rest of the site. I thought I'd use a CSS selector of

nav a, a:hover

nav a, a:hover

, but this selects

nav a

nav a

and

a:hover

a:hover

not

nav (a and a:hover)

nav (a and a:hover)

. Is there a ... brackets for this, like for math?

Rrik I want to set the style of `a, a:hover, a:visitied` and `a:active`, in the nav s...

Tok124 (CSS Nerd)•8/23/24, 4:13 AM

you can use the :is pseudo class

rikOP•8/23/24, 4:14 AM

Thank you. I had no idea that existed.

Tok124 (CSS Nerd)•8/23/24, 4:16 AM

Kevin have a video where he talks about :is and the difference between :is and :where

Ἔ

ἔρως•8/23/24, 8:14 AM

you can also use css nesting:

Tok124 (CSS Nerd)•8/23/24, 8:17 AM

i think it's easier just doing tbh ^^
But yeah, CSS Nesting works too

Mannix•8/23/24, 8:47 AM

w/o nesting you don't get the a

Mannix•8/23/24, 8:48 AM

so you would need to use

Tok124 (CSS Nerd)•8/23/24, 8:49 AM

Yeah, true, didnt think about that he also wanted to apply for the style for anchor tag

Tok124 (CSS Nerd)•8/23/24, 8:53 AM

or you could also do

TTok124 (CSS Nerd)i think it's easier just doing `nav a:is(:hover,:visited,:active) {}` tbh ^^ But...

Ἔ

ἔρως•8/23/24, 8:58 AM

the advantage of the css nesting is that it can just be ran through sass and you get old boring compatible css, while the :is cant be done like that

Ἔἔρως the advantage of the css nesting is that it can just be ran through sass and you...

Tok124 (CSS Nerd)•8/23/24, 9:04 AM

Yeah that's true. the compiled code will be just old boring compatible css yeah

Ἔ

ἔρως•8/23/24, 9:13 AM

yup, that is one of the advantages

Ἔ

ἔρως•8/23/24, 9:14 AM

the other is that you can just dump any media queries in the nested selector and it will also be compiled to the old boring compatible css

Tok124 (CSS Nerd)•8/23/24, 9:23 AM

true yeah. but yeah the :is pseudo class does have a pretty good support. Supported in all browsers except IE but i highly doubt anyone actually uses IE. And yeah if you have not updated your browser for a couple of years you the :is pseudo class also would not work. So yeah i mean if you really wanna stay on the safe side, writing the code in SCSS with nesting is the best option yeah. But maybe OP is not using SCSS, and i am pretty sure that :is pseudo class does have better support than CSS Nesting.

Ἔ

ἔρως•8/23/24, 10:27 AM

the problem is that, for example, consoles usually dont get updates to the browsers

Ἔ

ἔρως•8/23/24, 10:27 AM

and other stuff, like tvs, also rarely get updates

Ἔ

ἔρως•8/23/24, 10:28 AM

there's lots of stuff that doesn't get the updates it should, and we cant do anything but to live with an old browser

Ἔ

ἔρως•8/23/24, 10:29 AM

and you are right, if he's not using sass then css nesting has much much worse support than :is

Tok124 (CSS Nerd)•8/23/24, 10:58 AM

Yupp. so if he uses SCSS, then yeah, i agree. nesting is the best option.
Otherwise you will have to make a long selector if you really want to be sure that it's supported everywhere.
So then you need

But i personally don't care too much about supporting IE or extremly outdated versions of each browser, so i would personally go with :is pseudo class. But if it is super important that all browsers can support it. Then yeah, old boring long selector is needed.

And yeah i don't know about tvs, i don't have a tv so idk... But from what i've seen, seems like people rarely browse the web on TV, they do use the internet, but rarely the browser. And i guess it must be possible to update browser on a tv? Otherwise that's really really bad lol ^^

Ἔ

ἔρως•8/23/24, 11:00 AM

it is possible to update, but, for example, you wont be jumping from webos 4 to webos 5

Ἔ

ἔρως•8/23/24, 11:01 AM

also, consoles tend to keep the same old version of webkit/blink, and that is used to exploit the ps/xbox with remote code execution

Ἔ

ἔρως•8/23/24, 11:02 AM

but, you are right in what you are saying: :is is superior

Tok124 (CSS Nerd)•8/23/24, 11:03 AM

Yeah

rikOP•8/23/24, 1:56 PM

Thank you for the updates to this conversation while I was asleep. They were very interesting to read.

Ἔ

ἔρως•8/23/24, 2:46 PM

you're welcome