Ist: nicht möglich bei einem Platzhalter-Attributselektor

Question

Kann ein Selektor :not für einen Platzhalter-Attributselektor verwendet werden?

Beispiel:

<div class="circle circle-red"></div> 
<div class="circle circle-blue"></div> 
<div class="circle circle-yellow"></div> 
<div class="circle"></div> 

ich nur die div mit der Klasse ‚Kreis‘ ansprechen will und nicht die divs mit Klasse ‚Kreis-rot‘, ‚Kreis-blau‘, ‚Kreis-gelb‘

Answer 1

Sie können den Negationswähler (:not) zusammen mit dem Attribut enthält Selektor für diesen Zweck verwenden.

Der Wähler div.circle:not([class*="circle-"]) nur die div wählen wird, die die circle Klasse hat aber enthält keine andere Klasse des Formats circle-.

div.circle:not([class*="circle-"]) { 
 
    color: green; 
 
}

<div class="circle circle-red">Red</div> 
 
<div class="circle circle-blue">Blue</div> 
 
<div class="circle circle-yellow">Yellow</div> 
 
<div class="circle">None</div> 
 
<div class="circle-orange">Orange</div>

Answer 2

Sie können Kette: nicht Selektoren.

.circle { 
 
    width: 20px; 
 
    height: 20px; 
 
    border: 1px solid black; 
 
} 
 

 
.circle:not(.circle-blue):not(.circle-yellow):not(.circle-red) { 
 
    background: yellow; 
 
}

<div class="circle circle-red"></div> 
 
<div class="circle circle-blue"></div> 
 
<div class="circle circle-yellow"></div> 
 
<div class="circle"></div>