Menu
Is it possible to use a :not selector on a wildcard attribute selector?
Example:
<div class="circle circle-red"></div>
<div class="circle circle-blue"></div>
<div class="circle circle-yellow"></div>
<div class="circle"></div>
I want to address only the div with class 'circle' and not the divs with class 'circle-red', 'circle-blue', 'circle-yellow'
618
The universal selector is used as a wildcard character.
The * wildcard is known as the containing wildcard since it selects elements containing the set value. With the ^ wildcard, you get to select elements whose attribute value starts with the set value. The $ wildcard lets you select elements whose attribute values end with the specified value.
A wildcard is a symbol that takes the place of an unknown character or set of characters. Commonly used wildcards are the asterisk ( * ) and the question mark ( ? ).
You can use the negation selector (:not) along with the attribute contains selector for this purpose.
The selector div.circle:not([class*="circle-"]) will select only the div which has the circle class but doesn't contain any other class of the format 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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
