nested :is() selector

what am i missing with this selector

& :is(>:nth-child(1)){
   background: turquoise; 
}

& :is(>:nth-child(1)){
   background: turquoise; 
}

but this works

& >:nth-child(1) {
    grid-column: 1;
    grid-row: 3;
 }

& >:nth-child(1) {
    grid-column: 1;
    grid-row: 3;
 }


```
& :is(:nth-child(1)) {
    grid-column: 1;
    grid-row: 3;
 }
````

have also tried

&:is(>:nth-child(1)) {...} &:is(> :nth-child(1)) {...} &:is(>:first-child) {...}` and a few more. here is the example . i know im just missing a space or something. but goal is how to get direct-child:nth child(n) while using :is() and nesting "&" in the media-query around CSS line 440 https://codepen.io/Miss-Fox/pen/qBvGEGp?editors=1100. Is this an issue with the selectore or specificty or.....?

Miss Fox

CodePen

Selector hmmm...

...

8 Replies

cubiq•10mo ago

so what's wrong with using this?

cubiq•10mo ago

gpt tells me the problem is that in :is, it doesn't know anything about the parent. but this is so interesting so im gonna look at this a bit deeper

cubiq•10mo ago

i think you'd have to do probably this

b1mind•10mo ago

Please don't use chatGPT to help answer human questions, they can do that for themselves. Most people ask her cause they want an experienced answer. sorry I read this more as you using to answer them not ask a explainer but still.

cubiq•10mo ago

right, i couldn't figure my head around it and couldn't even find any proper mdn reference to it that would make a sense

cubiq•10mo ago

right, yeah, im really skeptical about asking for this kind of help directly to gpt, especially when it was telling me false stuff before. so this is it's corrected answer. corrected twice but on the third time it makes sense finally

clevermissfoxOP•10mo ago

so is this answer ("that :is doesnt know anything about the parent") accurate? im glad im not totally crazy and this is confusing to others too nothing wrong with it, i thought i had tried that but i guess not. thank you cubiq, many of these work !

      /*WORKS*/
      &>:is(:nth-child(1)){
        background: turquoise;
      } 
      
      /*WORKS*/
      & >:is(:nth-child(1)){
        color: hotpink;
      } 
      
      /*WORKS*/
      :is(&>:nth-child(1)) {
        border: 2px solid lime;
      }

      /*WORKS*/
      &>:is(:nth-child(1)){
        background: turquoise;
      } 
      
      /*WORKS*/
      & >:is(:nth-child(1)){
        color: hotpink;
      } 
      
      /*WORKS*/
      :is(&>:nth-child(1)) {
        border: 2px solid lime;
      }

and to compile, these did not work

/*DOESNT WORK*/
& :is(>:nth-child(1)){
   background: turquoise; 
}

/*DOESNT WORK*/
&:is(>:nth-child(1)){
   background: turquoise; 
}

/*DOESNT WORK*/
&:is(> :nth-child(1)){
   background: turquoise; 
}

/*DOESNT WORK*/
&:is(>:first-child) {
   background: turquoise; 
}

/*DOESNT WORK*/
& :is(>:nth-child(1)){
   background: turquoise; 
}

/*DOESNT WORK*/
&:is(>:nth-child(1)){
   background: turquoise; 
}

/*DOESNT WORK*/
&:is(> :nth-child(1)){
   background: turquoise; 
}

/*DOESNT WORK*/
&:is(>:first-child) {
   background: turquoise; 
}

Ive been running into some nesting/selector issues when i get a few levels deep that confuse me but just figure may be a limitation of nesting or the specificity when nesting. I can have a selector like & :is(.element:has(.child)) {...} and values work if i take it out of the nest and just replace the & .parent :is(.element:has(.child)){...} . just as an example. i never know if its the platform im using, some side-effect of nesting, or if the selector is invalid because i have also noticed a behaviour where emmet doesnt work properly on the platform im using im im at level 2 (for instance, doesnt populate my custom-props) but if im at level 3 nested within the parent, it goes back to working properly. I will have to start making a list of nested selectors that dont work within the nest but work outside of it and see if i can figure out a pattern

Gaming

Programming

nested :is() selector