Selecting Void Tags When Empty

Css has specified two pseudo-classes that should select an element when it has no contents, :empty and :blank, but both of these enjoy different browser support and aren't always right for the situation where you want to apply styles. Especially when the situation is styling <input> tags, being able to detect when the tag is completely empty can be very useful.

Parts Required

JS Tests

Value is undefined:

!element.value

Plugins Capable

• EQCSS
• Varsity
• reproCSS
• Container Queries Mixin
• Scoped Eval Mixin
• VARIUS

Syntax Examples

EQCSS

@element select {
  eval('!value && "$this"') {
    border: 5px solid lime;
  }
}

Selectory

select[test='!this.value'] {
  border: 5px solid lime;
}

Demos

• Select an empty <select> with EQCSS
• Select an empty <select> with Selectory