: nicht Selektor in CSS

Question

Ich muss den Text in allen Elementen eines HTML-Dokuments mit Ausnahme der in einer bestimmten Klasse verschachtelten formatieren. Ich habe keine Kontrolle über das HTML, ich kann nur das CSS ändern.

hier ein Stück Code ist:

<div class="container"> 
    <div class="column c1"> 
    <div class="text"> 
     text in column 1 
    </div> 
    </div> 
    <div class="column c2"> 
    <div class="text"> 
     text in column 2 
    </div> 
    </div> 
    <div class="column c3"> 
    <div class="text"> 
     text in column 3 
    </div> 
    </div> 
</div> 

Ich möchte alle text Elemente, außer denen in einem c1 Elemente, fett zu sein. Ich weiß nicht im Voraus, wie viele Spalten es geben kann.

Ich habe die folgende CSS versucht, die Verwendung des :not Wähler macht, aber es macht alles fett:

.container { 
    display: flex; 
} 

.column { 
    padding: 0 1em; 
} 

:not(.c1) .text { 
    font-weight: bold; 
} 

Warum ist nicht die :not Wähler zu arbeiten? Was mache ich falsch? Here is a jsfiddle ausprobieren.

Answer 1

Das ist, weil :not(.c1) wird jedes Element auswählen, die nicht diese Klasse hat. Das kann auch die .container sein.

entweder ein direktes Kind combinator hinzufügen:

:not(.c1) > .text { 
    font-weight: bold; 
} 

Oder auch die andere Klasse verwenden:

.column:not(.c1) .text { 
    font-weight: bold; 
} 

Answer 2

Sie müssen nur von einem Nachkommen zu einem Kind-Kombinator wechseln.

Mit anderen Worten, von hier:

:not(.c1) .text 

Um dies:

:not(.c1) > .text 

revised fiddle

---

Ihre Wähler ...

:not(.c1) .text { 
    font-weight: bold; 
} 

entspricht dies:

*:not(.c1) .text { 
    font-weight: bold; 
} 

Dieser Selektor sagt:

ein Element mit Klasse wählen text, die ein Nachkomme eines anderen Elements ist, mit Ausnahme eines Elements mit Klasse c1.

Okay, gut, ist .text ein Nachkomme eines div mit Klasse c1 in einem Fall – so wird es ausgeschlossen, wie Sie möchten. Aber .text ist auch ein Nachkomme von html, body und .container. Daher funktioniert die Regel nicht wie erwartet, da sie mehrere Szenarien erfüllt.

Stattdessen versuchen Sie dies:

:not(.c1) > .text { 
    font-weight: bold; 
} 

Dieser Selektor sagt:

ein Element auswählen mit Klasse text, wenn das übergeordnete Element c1 nicht die Klasse.

Answer 3

Siehe here. Sie müssen die Klasse column deklarieren.

Dies hat den Zweck erfüllt:

.column:not(.c1) .text { 
    font-weight: bold; 
} 

Answer 4

Dies kann arbeiten:

.column:not(.c1) .text { 
     font-weight: bold; 
    }