Re: [csswg-drafts] [selectors-4] Add a count to :has() (#1547)

You might want to check out [quantity queries](http://quantityqueries.com/) which are kind of a selector hack that targets an element based on the number of siblings :D It's functionally similar to what you're asking for and supported in browsers right now, though it is a little ugly to look at and reason with.

Going the JS route, I've implemented responsive conditions like `min-characters`, `characters`, and `max-characters` as element queries a couple of different ways that we can use in the meantime while we wait for browsers to support `:has()`. You can use EQCSS as a custom syntax like this with `(min-children: n)` or `(children: n)` or `(max-children: n)`:

```html
<ul>
  <li>one
</ul>
<ul>
  <li>one
  <li>two
</ul>
<ul>
  <li>one
  <li>two
  <li>three
</ul>

<style>
  @element ul and (children: 2) {
    :self {
      background: lime;
    }
  }
</style>

<script src=https://elementqueries.com/EQCSS.js></script>
```

as well as in CSS, parsed from CSSOM and run through javascript plugins like this:

```html
<ul>
  <li>one
</ul>
<ul>
  <li>one
  <li>two
</ul>
<ul>
  <li>one
  <li>two
  <li>three
</ul>

<style>
  @supports (--element("ul", {"children": 2})) {
    [--self] {
      background: lime;
    }
  }
</style>

<script type=module>
  import deqaf from 'https://unpkg.com/deqaf/index.js'
  import element from 'https://unpkg.com/jsincss-element-query/index.vanilla.js'

  deqaf({stylesheet: {element}})
</script>
```
And I've also written a plugin for supporting the [`:has()` selector](https://www.npmjs.com/package/jsincss-has-selector) which would work too, if you wanted to target the `<ul>` in the way that `:has()` would using a quantity query, rather than by targeting the `<li>` themselves as the quantity query selector would do:

```html
<ul>
  <li>one
</ul>
<ul>
  <li>one
  <li>two
</ul>
<ul>
  <li>one
  <li>two
  <li>three
</ul>

<style>
  ul[--has='"li:nth-last-child(n+2):nth-last-child(-n+2):first-child, li:nth-last-child(n+2):nth-last-child(-n+2):first-child ~ li"'] {
    background: lime;
  }
</style>

<script type=module>
  import deqaf from 'https://unpkg.com/deqaf/index.js'
  import has from 'https://unpkg.com/jsincss-has-selector/index.vanilla.js'

  deqaf({rule: {has}})
</script>
```

-- 
GitHub Notification of comment by tomhodgins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1547#issuecomment-445134325 using your GitHub account

Received on Friday, 7 December 2018 06:15:42 UTC