Element Query At Rule

A simple implementation of element queries you can use this either for scoped styles alone (using :--self), or for element queries to express responsive breakpoints on properties of elements as rendered on the rendered page.

Syntax

@--element <selector list> [and <condition>*] { <list of css rules> }

• <selector list> is a comma separated list of CSS selectors
• <condition> looks like (<feature>: <breakpoint>)
• <feature> is any of: min-width, max-width, min-height, max-height, min-children, children, max-children, min-characters, characters, max-characters, min-scroll-x, max-scroll-x, min-scroll-y, max-scroll-y, min-aspect-ratio, max-aspect-ratio, orientation
• <breakpoint> is either a unitless number (e.g. 5, 1.777) or one of the following strings for the orientation feature: 'portrait', 'square', 'landscape'
• <list of css rules> is a list of CSS rules to be added to the CSS output, using the selector :--self as a placeholder to represent each matching element in the page

Usage

The following element query would apply the styles to any <nav> or <aside> if they were 500px or wider:

@--element nav, aside and (min-width: 500) {
  :--self {
    background: lime
  }
}

The following element query would target all <input> tags in the document, and apply a CSS rule to that element any time it had 5+ characters of text content inside:

@--element input and (min-characters: 5) {
  :--self {
    background: lime
  }
}

More Info

• This feature automatically uses jsincss-element-query plugin for support in the browser.