web-dev-qa-db-fra.com

Utilisation de CSS: pas de sélecteur dans les règles MOINS imbriquées

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

Dans l'exemple MOINS ci-dessus, je souhaite cibler tous les éléments "p" d'une classe div "classe externe", mais PAS les éléments p de la division imbriquée supplémentaire appelée ".nested" - cela ne fonctionne pas mais rend tous les éléments p verts. J'ai essayé...

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

et aussi...

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

... en vain. Est-ce possible ou qu'est-ce qui me manque? Je suis tout nouveau à LESS

csscss3css-selectorsless
14
user2317093

Ce n'est pas un problème MOINS autant que la syntaxe de votre sélecteur css. La fonction p:not(.nested) indique tous les éléments p sans la classe .nested eux-mêmes, ce que vous déclarez est que le .nested est sur un div dans lequel réside le p, vous avez donc besoin de ceci:

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

MISE À JOUR: J'ai supprimé le div et ajouté l'instance enfant directe p, afin que la sortie CSS cible correctement tous les p dans .outerclass À l'exception de l'exception .

La sortie CSS pour les éléments p serait 

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

Ce qui précède ciblera tous les éléments enfants p directs et tous les éléments p imbriqués dans .outerclass, À l'exception de ceux qui sont les enfants de votre élément .nested.

Un problème

Le problème que BoltClock note est que si le p est imbriqué plus profondément que l'enfant immédiat de l'élément .nested. Voir ce violon où le dernier élément p est toujours ciblé même s'il se trouve dans une classe .nested .

Si l'élément p sera toujours l'enfant direct de .nested, Il n'y a pas de problème. Ou si le .nested Est toujours l'enfant direct de .outerclass Mais que le p peut être imbriqué plus profondément, le sélecteur ci-dessus peut être changé en > :not(.nested) p pour produire CSS de .outerclass > :not(.nested) p qui fonctionnera alors pour tous p sous .nested .

Le problème sera si le .nested Par rapport à .outerclass Et le p dans .nested Sont les deux à une profondeur arbitraire pour ces parents. Aucun sélecteur CSS ne peut gérer cela de manière adéquate.

28
ScottS