CODEWITHSUNDEEP
htmlcss
Bryan Casler
Bryan Casler

Reputation: 617

How to combine wildcard and not selectors in CSS

Imagine you have a div in one of three possible states.

<div id="apple" />
<div id="apple" class="expanded" />
<div id="apple" class= "collapsed" />

How can you explicitly target the #apple div only when the expand AND collapse classes are NOT present?

What I came up with is #apple :not[id$="ed"] but it's not working. Is it possible to combine both these selectors?

Note: For this scenario it's not enough to directly style #apple. The selection has to be explicitly for only when the expand and collapse classes are NOT there. The only browser that needs to be supported is a current release of Chrome.

Upvotes: 0

Views: 1203

Answers (3)

I haz kode
I haz kode

Reputation: 1635

Use the attribute selector [class] to target any class.

Since you want to use :not then you can do something like this

#apple:not([class]) which selects #apple only if it doesn't have any classes.

Working example:

#apple:not([class]) {
  color: red;
}
<div id="apple">no class</div>
<div id="apple" class="expanded">expanded class</div>
<div id="apple" class="collapsed">collapsed class</div>

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191749

#apple:not(.expanded):not(.collapsed)

However, it's not valid to have multiple id=apple elements. Technically, you could also do: #apple:not([class~=expanded]):not([class~=collapsed]). To be even more general, perhaps #apple:not([class])

Upvotes: 3

KittMedia
KittMedia

Reputation: 7466

#apple:not(.expand):not(.collapsed) will work.

Upvotes: 2

Related Questions