CODEWITHSUNDEEP
csscss-selectors
MR.ABC
MR.ABC

Reputation: 4862

CSS attribute selector for existing but 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!=''].

Upvotes: 139

Views: 88426

Answers (3)

siux
siux

Reputation: 51

If you prefer a sass/scss solution:

.selector {
  @include attr-isset('attribute-name') {
    ...styles
  }
}

you may use this mixin:

/**
 * Requires
 */
@use "sass:meta";

/**
 * Select current scope only if a given attribute is set
 * @param {string} $attribute - Attribute name, default: 'class'
 * @param {boolean} $empty - Allow empty attribute
 * @param {string} $error - Error message prefix
 * @output Wraps given content styles to apply only if the current scope element has the given attribute
 */
@mixin attr-isset($attribute: 'class', $empty: false, $error: 'attr-isset::') {
  @if meta.content-exists() != true {
    @error '#{$error}@content is required';
  }
  @if $empty {
    &[#{$attribute}] {
      @content;
    }
  } @else {
    &[#{$attribute}]:not([#{$attribute}='']) {
      @content;
    }
  }
}

Upvotes: 0

Sumit Asagaonkar
Sumit Asagaonkar

Reputation: 355

for style false support

[{ font: ["sofia", "slabo", "roboto", "inconsolata", "ubuntu", false] }]

.ql-snow .ql-picker.ql-font .ql-picker-item:not([data-value])::before {
content: "default";
font-family: none !important;}

.ql-snow .ql-picker.ql-font .ql-picker-label:not([data-value])::before {
content: "default";}

Upvotes: -3

sangram parmar
sangram parmar

Reputation: 8736

try this

<style>
    [Data-Attribute]:not([Data-Attribute=""])
    {
        background-color: Red;
    }
</style>

Upvotes: 292

Related Questions