Scss, nth-child & :not() Selektor ⇐ CSS

[Anonymous]

Ich bin ein bisschen neu in Sachen SCSS und habe diesen grundlegenden Stil für Zeilen in meinem Zeilencontainer.

Code: Select all

.rows-container{
border-bottom:2px ridge grey;
}
.row{
height:30px;width:100%;

&:hover div{
background-color:lightgrey;
}
&:nth-child(odd){
background: white;
}
&:nth-child(even){
background: #e0e0e0;
}
}

Ganz einfach mit dem folgenden HTML: Ich habe etwas HTML weggelassen, das nicht wichtig ist.

Code: Select all

 //white
//grey
//white
//grey etc...

Aber jetzt habe ich untergeordnete Zeilen hinzugefügt

Code: Select all

{{each rows}}
           //parent row

{{each childs}}
//several rows from the same table which have a parent_id connected to the current row.
{{#each}}

{{#each}}

Ich habe vor, die Unterelemente per Klick umzuschalten. Wenn jedoch keine Unterelemente sichtbar sind (Unterelemente haben eine eigene Farbe), ist die ungerade/gerade Zeile „.rows“ durcheinander. Nun denke ich, dass dies dadurch verursacht wird, dass das n-te Kind ungerade/gerade für alle Zeilen/Unterelemente im Container berechnet wird und nicht nur für die .row(s).
Gibt es eine Möglichkeit, die .rows ungerade/gerade zu formatieren, aber .subitems von der ungeraden/geraden Rotation auszuschließen? Ich dachte, dass es vielleicht eine Möglichkeit gibt, :not() in scss zu verwenden, aber bisher ist mir das nicht gelungen.