web-dev-qa-db-ja.com

LESSのネストされたルールでCSS：notセレクターを使用する

.outerclass {
    h3 {
        color: blue;
    }
    p:not(.nested) {
        color: green;
    }
}

上記のLESSの例では、divクラス「outerclass」内のすべての「p」要素をターゲットにしますが、「。nested」と呼ばれるさらにネストされたdiv内のp要素はターゲットにしたくない。私が試してみました...

p:not(.nested p) // excludes all p elements

そしてまた...

p:not(.nested > p) // excludes all p elements

...無駄に。これは可能ですか、何が欠けていますか？私は真新しいです

csscss3css-selectorsless
14
user2317093

それは、CSSセレクター構文ほどの問題ではありません。 p:not(.nested)は、_.nested_ classthemselvesなしのすべてのp要素を言っています、あなたが述べているのは_.nested_クラスはdivが存在するpにあるため、これが必要です：

_.outerclass {
    h3 {
        color: blue;
    }
    :not(.nested) p,
    > p {
        color: green;
    }
}
_

更新：divを削除し、直接の子pインスタンスを追加したので、CSS出力は例外を除いて_.outerclass_のすべてのpを適切にターゲットにします。

p要素のCSS出力は

_.outerclass :not(.nested) p,
.outerclass > p {
  color: green;
}
_

上記は、直接の子p要素と、_.outerclass_要素の子であるものを除く、_.nested_のネストされたp要素を対象とします。

問題

BoltClockが指摘している問題は、pが_.nested_要素の直接の子であるよりも深くネストされている場合です。 _.nested_クラス内にあるにもかかわらず、最後のp要素がまだターゲットになっているこのフィドルを参照してください 。

p要素が常に_.nested_の直接の子である場合、問題はありません。または、_.nested_が常に_.outerclass_の直接の子であるが、pがより深くネストされている場合、上記のセレクターを> :not(.nested) pに変更して、 .outerclass > :not(.nested) p which _.nested_ の下のすべてのpに対して機能します。

問題は、_.nested_に関連する_.outerclass_と、_.nested_内のpがbothに対して任意の深さである場合です。親。どのCSSセレクターもそれを適切に処理できません。

28
ScottS