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).
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).
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>
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 :)