Select an Element with a Non-Empty Attribute

Use the CSS selector to select elements with non-empty attributes

Short answer:

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

Detailed explanation: (The conclusion is the same, just explaining why we need to do this)

Suppose you have an element that uses a special data- property for style:

<div data-highlight="product">
</div>

You want to locate the element and perform special actions when highlighted.

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

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

The data- property is part of the template, so it can have any value you set.

<div data-highlight="{{ value }}">
</div>

Sometimes there is no value! Therefore the output HTML is:

<div data-highlight="">
</div>

But this can be tricky. See the first CSS code block above, we want to locate all elements with data-highlight attribute, however, we actually want to do this only if it has a value. If the value is empty, we just want to skip any special styles.

Ideally, when there is no value, we just remove data- property from the HTML template. But many template languages ​​intentionally do not allow logic that can help us add or not add that attribute entirely.

Instead, we can solve it using CSS:

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

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

The above is the detailed content of Select an Element with a Non-Empty Attribute. For more information, please follow other related articles on the PHP Chinese website!