CSS: mit Negation * alle Elemente

Question

Ich möchte alle <img> Elemente auszuwählen, die innerhalb eines <article> sind und nicht in ein <figure>

Nach diesen 2: How to create a css rule for all elements except one class?

https://www.w3.org/TR/css3-selectors/#negation

Alle <img> sind eingewickelt in <a> oder <p>. Es scheint, es könnte mit Negation gemacht werden. Meine Regel sieht jetzt so aus:

article *:not(figure) img { border: 2px solid red; } 

Irgendwelche Tipps Tricks, warum das nicht funktioniert?

Answer 1

Es funktioniert, aber Sie sagen dem Browser, dass img Elemente in etwas verpackt werden müssen. So img Tags direkt in der article Tag wird nicht funktionieren, aber alles geschachtelt z. in einem div Willen:

article *:not(figure) img { 
 
    border: 2px solid red; 
 
}

<article> 
 
    <img src="//placehold.it/50"> 
 
    <figure class="x"> 
 
    <img src="//placehold.it/50"> 
 
    </figure> 
 
    <div> 
 
    <img src="//placehold.it/50"> 
 
    </div> 
 
</article>

Was Sie wahrscheinlich brauchen:

article *:not(figure) img, 
 
article > img{ 
 
    border: 2px solid red; 
 
}

<article> 
 
    <img src="//placehold.it/50"> 
 
    <figure class="x"> 
 
    <img src="//placehold.it/50"> 
 
    </figure> 
 
    <div> 
 
    <img src="//placehold.it/50"> 
 
    </div> 
 
</article>

Bitte, den Rat aus den Kommentaren betrachten und sehen, ob Ihre Situation erlaubt keine alternative Lösung, die t nicht verwendet er * Universal und :not Selektor. Z.B.

article img { 
 
    border: 2px solid red; 
 
} 
 

 
article figure img { 
 
    border: none; 
 
}

<article> 
 
    <img src="//placehold.it/50"> 
 
    <figure class="x"> 
 
    <img src="//placehold.it/50"> 
 
    </figure> 
 
    <div> 
 
    <img src="//placehold.it/50"> 
 
    </div> 
 
</article>

Aber ob das verwendbar für Sie ist abhängig von der gesamten Kontext: dies kann viel einfacher sein.