Style element when data-attribute has not empty value

style if data-highlight is have a value otherwise do nothing: [data-highlight]:not([data-highlight=""])

by Konstantin Rouda

HTML

<p class="p" data-highlight="red">
  Hello World!
</p>

CSS

P {
  box-sizing: border-box;
  
}

[data-highlight]:not([data-highlight=""]) {
  font-size: 2rem;
  background: yellow;
  color: firebrick;
}

JavaScript

/*
From:
https://css-tricks.com/select-an-element-with-a-non-empty-attribute/
*/