2016-05-04 7 views
1

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 
     } 
    } 
    } 
} 

Antwort

3

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>

+1

Dank tausend! – deroccha

1

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 
       } 
      } 
     } 
    } 
} 
Verwandte Themen