is() selector issue

Was making an example for somebody on another server and found that while:

.cat-container.walking > img.walking, 
.cat-container:not(.walking) > img.idle {

.cat-container.walking > img.walking, 
.cat-container:not(.walking) > img.idle {

worked, the following use of :is() didn't:

.cat-container:is(.walking > img.walking, :not(.walking) > img.idle){

.cat-container:is(.walking > img.walking, :not(.walking) > img.idle){

I'm confused as to why?

7 Replies

Unknown User•2y ago

Message Not Public

is/where/not () wil look into its current element. so you are still in cat-container, not the image

Unknown User•2y ago

Message Not Public

Im horrible with explaining. everthing between the () is for the element itself.

A CSS pseudo-class(-selector) is a keyword added to a selector that specifies a special state of the selected element(s).

A CSS pseudo-class(-selector) is a keyword added to a selector that specifies a special state of the selected element(s).

so you can't select descendants with it

Unknown User•2y ago

Message Not Public

the container does not know about the state of its children.

MatthaisOP•2y ago

I follow, thanks