Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS attribute selector for non-empty attributes

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!=''].

like image 736
MR.ABC Avatar asked Jun 22 '13 08:06

MR.ABC


People also ask

How can we select elements with a specified attribute in CSS?

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".

Can an attribute have no value?

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.

What does the CSS selector a href $= org select?

It matches links with href attributes whose values start with the given string.

How do I style a data attribute in CSS?

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.


1 Answers

try this

<style>     [Data-Attribute]:not([Data-Attribute=""])     {         background-color: Red;     } </style> 
like image 130
sangram parmar Avatar answered Sep 29 '22 14:09

sangram parmar