:snapped-target

[argyleink]

Context: explainer

Questions?
Thoughts?
Naming fine?
Risks?

[argyleink]

things to think about:

1. could be multiple matches
2. need ability to specify which axis?

[argyleink]

scroll-state queries are looking to take this role over, check here in Canary

  container-type: scroll-state;
  scroll-snap-align: center;
      
  @supports (container-type: scroll-state) {
    figcaption {
      transform: translateY(100%);
          
      @container scroll-state(snapped: inline) {
        transform: translateY(0);
      }
   }
}

[rol4nd909]

This is nice :) not sure if I found a bug or what I try is not possible. But it looks like I can't select the next sibling of a snapped item with the ~ selector.

example

.slides > div {
    container-type: scroll-state;

    @container scroll-state(snapped: inline) {
      > .slide {
        // properties for snapped item
      }
      
      ~ div {
        // properties for the next sibling of snapped item
      }
    }
  }

and a codepen to show:
https://codepen.io/ROL4ND909/pen/WNqLozL/4d6bda825268281aa0af2f14b925513a

[argyleink]

asking the engineer! your setup looks reasonable to me

[argyleink]

i see, he's right, a container query can't query a sibling of the container, only children. so the > works because it's targeting children. the ~ won't match because container queries only do child nodes of the container.

[rol4nd909]

So it's build like that. Would be awesome if we could target the ~