Select an Element with a Non-Empty Attribute

Select an Element with a Non-Empty Attribute

Short answer:

[data-foo]:not([data-foo=""]) { }

Why you might need this

Consider an element styled with a special data-attribute:

<div>
</div>

You want to target that element specifically for highlighting effects.

[data-highlight] {
  font-size: 125%; 
}

[data-highlight="product"] img {
  order: 1;
}

That data-type attribute comes from a template, so it can carry any value your system assigns.

<div>
</div>

But sometimes no value is set, leaving output HTML like:

<div>
</div>

The challenge: the first CSS rule targets every element carrying the data-highlight attribute—even when its value is blank. If the attribute is empty, you want to skip styling altogether.

Ideally, you could strip the attribute from the template when it holds no value. However, many templating languages deliberately omit the logic needed to conditionally include or exclude an attribute.

The CSS workaround:

[data-highlight]:not([data-highlight=""]) {
  font-size: 125%; 
}

[data-highlight="product"] img {
  order: 1;
}