CODEWITHSUNDEEP
csscss-selectors
VorganHaze
VorganHaze

Reputation: 2066

Is there a CSS selector for any attribute with a specific value?

Is there a CSS selector that can target a specific attribute value regardless of its attribute? I am looking for something like [*="value"] (using a wildcard) or {value} (a direct value selector).

Upvotes: 7

Views: 7662

Answers (3)

John Z
John Z

Reputation: 1

You can select an attribute without an associated value by omitting the ="" in your selector. For example *[class] { display: none; } will hide any element with a class assigned to it.

Upvotes: -2

Imran Rafiq Rather
Imran Rafiq Rather

Reputation: 8118

The simple answer is NO. We have to use any of the Basic Selectors or attribute selector.

Here is the list of all the CSS selectors.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

You cannot find any of the value selector :)

Upvotes: 1

TylerH
TylerH

Reputation: 21078

No. CSS attribute selectors are designed to select based on the attribute (hence the name). If you want to select something based on a value rather than an attribute or attribute value, then just use CSS classes.

Alternatively, you can write a verbose selector that includes all the attributes your document will contain (because you should know that information ahead of time), e.g.:

div[data-value="value"], div[href="value"], div[hello="value"], div[goodbye="value"] {
    color: red;
}
<div data-value="value">Red</div>
<div>Black</div>
<div href="value">Red</div>
<div hello="value">Red</div>
<div goodbye="value">Red</div>
<div>Black</div>
<div>Black</div>

Upvotes: 2

Related Questions