12 replies

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)) {
    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.....?

CodePenMiss Fox

Selector hmmm...

...

KP-C

Kevin Powell - Community•3y ago•

12 replies

curiousmissfox

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)) {
    grid-column: 1;
    grid-row: 3;
 }
````

have also tried

&:is(>:nth-child(1)) {...}

&:is(> :nth-child(1)) {...}

CodePenMiss Fox

Selector hmmm...

...

nested :is() selector

Similar Threads

nested :is() selector

Similar Threads

Similar Threads

Similar Threads