Is there a CSS selector that applies to non-empty attributes? Using :not([Data-Attribute=''])
matches if the attribute is non-existing, too.
I'm looking for something like [Data-Attribute!='']
.
The [attribute|="value"] selector is used to select elements with the specified attribute, whose value can be exactly the specified value, or the specified value followed by a hyphen (-). Note: The value has to be a whole word, either alone, like class="top", or followed by a hyphen( - ), like class="top-text".
To set an attribute without a value, select the element and call the setAttribute() method on it, e.g. button. setAttribute('disabled', '') . If we pass an empty string as a second parameter to the setAttribute method, the attribute is set without a value.
It matches links with href attributes whose values start with the given string.
To use this selector, add a pipe character (|) before the equals sign. For example, li[data-years|="1900"] will select list items with a data-years value of “1900-2000”, but not the list item with a data-years value of “1800-1900”. Value ends with: attribute value ends with the selected term.
try this
<style> [Data-Attribute]:not([Data-Attribute=""]) { background-color: Red; } </style>
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