How do I use the CSS Grouping selector for several children
I want to set the style of
a, a:hover, a:visitied and 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, but this selects nav a and a:hover not nav (a and a:hover). Is there a ... brackets for this, like for math?17 Replies
you can use the :is pseudo class
Thank you. I had no idea that existed.
np 🙂 Kevin have a video where he talks about :is and the difference between :is and :where 🙂
you can also use css nesting:
i think it's easier just doing
nav a:is(:hover,:visited,:active) {} tbh ^^
But yeah, CSS Nesting works toow/o nesting you don't get the a 🙂
so you would need to use
a,a:is(:hover,:visited,:active) {}Yeah, true, didnt think about that he also wanted to apply for the style for anchor tag
or you could also do
nav :is(a,a:hover,a:active,a:visited)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
Yeah that's true. the compiled code will be just old boring compatible css yeah
yup, that is one of the advantages
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
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.
the problem is that, for example, consoles usually dont get updates to the browsers
and other stuff, like tvs, also rarely get updates
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
and you are right, if he's not using sass then css nesting has much much worse support than :is
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 ^^
it is possible to update, but, for example, you wont be jumping from webos 4 to webos 5
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
but, you are right in what you are saying: :is is superior
Yeah 🙂
Thank you for the updates to this conversation while I was asleep. They were very interesting to read.
you're welcome