In einem tief geschachtelten Container möchte ich überprüfen, ob body keine bestimmte Klasse hat und etwas Styling auf dieses Element anwenden.Verwendung: not() in weniger tief verschachtelt
Hier ist, was ich mit weniger versucht habe, aber es funktioniert nicht.
.node1{
.node2{
&-index-1{}
&-index-2 {
&:not(body.some-class){
//apply changes on &-index-2
}
}
}
}
Ja, Sie können durch die & (Mutter Wähler) am Ende angehängt, statt es zu Beginn der Verwendung.
.node1{
.node2{
&-index-1{
color: blue;
}
&-index-2 {
body:not(.some-class) &{ // reason for change of :not() is explained below.
color: red;
}
}
}
}
Eine Sache zu beachten ist, dass die CSS :not() Selektor zur Zeit keine komplexen Selektoren akzeptiert. Es akzeptiert nur einfache Selektoren und so sollte der Selektor wie body:not(.some-class) & geschrieben werden.
.node1 .node2-index-1 {
color: blue;
}
body:not(.some-class) .node1 .node2-index-2 {
color: red;
}<body>
<div class='node1'>
<div class='node2-index-1'>
Index 1
</div>
<div class='node2-index-2'>
Index 2
</div>
</div>
</body>So gelten nur Regeln Körper:
body{
.node1{
.node2{
&-index-1{}
}
}
&:not(.some-class) {
.node1{
.node2{
&-index-1{}
&-index-2 {
//apply changes on &-index-2
}
}
}
}
}
Dank tausend! – deroccha