Shorten / improve CSS selector
Hi guys, I am wondering if there is a way to shorten that selector (used in a
querySelector): :is(.ng-invalid, .ng-invalid:not(form) *):is(input, textarea)?
What I want in the end is to select either input.ng-invalid or textarea.ng-invalid or .ng-invalid:not(form) input or .ng-invalid:not(form) textarea but I can't find a good way.
I tried something like .ng-invalid:not(form):is(*, * *):is(input, textarea) where I hopped for :is(*, * *) to sort of "replace" the first * with .ng-invalid:not(form) but of course it's not working!16 Replies
this sounds like something you can solve with css nesting
oh, wait, ignore that
which other elements receive the .ng-invalid class?
Anything that is attached to angular form fields, no matter how the component is built 😬
thats way too unspecific
My selector already covers everything I need, I just to know if I can shorten it with a "trick" like I tried to do
i knoe
know
gpt suggests
that is different
that matches only input and textarea inside .ng-invalid
as long as the .ng-invalid isnt a form
the original is completely different
it matches any .ng-invalid that isn't a form but is an input or a select
wait, no, the original matches any .ng-invalid and any .ng-invalid child that isn't a form
or something like that, the match is different
I appreciate you trying to help, but please don't just ask chatgpt. People come here to get answers from real humans, and everyone has access to gpt3.5 for free
If they wanted an ai answer they could just get it themselves
i tried different things, but the selector you have is already quite short for what you want and is still (kinda) readable/understandable.
If there is a shorter way to do it, I suspect it won't be as clear
If I may ask, what's the purpose of making it as short as possible?
i have to agree, i cant find anything shorter and understandable and that does the same thing
maybe this with :has? ...not sure
get the parent of a .ng-invalid that is not a form and get the input or textarea underneath
probably wont work if the parent has multiple ng-invalids/inputs/textareas inside (you could wrap each one)
that requires so much mental gymnastics because of the implied
*Who would have thought I'd be a gymnast 😆
you're more like an human compactor, and my brain is just mush
Well it is mostly about curiosity! To see if we can do "better" with advanced/new features, that's it. If it is not readable, I won't adopt it BUT I would have learn something new
Thanks, it looks very interesting, I'll try it tomorow!