2016-05-04 4 views
1

深いネストされたコンテナでは、bodyに指定されたクラスがないかどうかをチェックして、この要素にスタイリングを適用したいと考えています。less:深いネストではnot()を使用

ここで私がLessで試したことはありますが、うまくいきません。

.node1{ 
    .node2{ 
    &-index-1{} 
    &-index-2 { 
     &:not(body.some-class){ 
      //apply changes on &-index-2 
     } 
    } 
    } 
} 

答えて

3

はい、あなたが最後に&(親セレクター)を追加代わりの開始時に、それを使用してすることができます。注意すべき

.node1{ 
    .node2{ 
    &-index-1{ 
     color: blue; 
    } 
    &-index-2 { 
     body:not(.some-class) &{ // reason for change of :not() is explained below. 
      color: red; 
     } 
    } 
    } 
} 

ことの一つは、CSSセレクタ:not()は、現在の複雑なセレクタを受け入れていないということです。それは単純なセレクタだけを受け入れるので、セレクタはbody:not(.some-class) &のように書くべきです。

.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

おかげで千を! – deroccha

1

だから体にルールを適用します。

body{ 
    .node1{ 
     .node2{ 
      &-index-1{} 
     } 
    } 

    &:not(.some-class) { 
     .node1{ 
      .node2{ 
       &-index-1{} 
       &-index-2 { 
        //apply changes on &-index-2 
       } 
      } 
     } 
    } 
} 
関連する問題