W3C home > Mailing lists > Public > public-css-archive@w3.org > April 2017

Re: [csswg-drafts] Quantity Queries Proposal

From: Tommy Hodgins via GitHub <sysbot+gh@w3.org>
Date: Thu, 06 Apr 2017 13:30:31 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-292175001-1491485430-sysbot+gh@w3.org>
I've been doing something similar with CSS Element Queries using the `children` responsive feature. Consider the following demo:

```html
<ul>
  <li>Item 1
</ul>
  
<ul>
  <li>Item 1
  <li>Item 2
</ul>
  
<ul>
  <li>Item 1
  <li>Item 2
  <li>Item 3
</ul>

<style>
  @element ul and (min-children: 3) {
    $this {
      background: lime;
    }
  }
</style>

<script src=http://eqcss.com/EQCSS.js></script>
```

The key part of this is `@element ul and (min-children: 3)` which will only apply the block of styles below if at least one element matches that selector and responsive condition.

I've written about this functionality in my [CSS Element Queries](https://tomhodgins.github.io/element-queries-spec/element-queries.html#children) spec, and you can find more demos of this functionality on CodePen here:

- [Min-Children Demo](http://codepen.io/tomhodgins/pen/dXGoMZ)
- [Counting Children to apply style to parent](http://codepen.io/tomhodgins/pen/adbzRM)
- [Responsive Content with styles based on number of children](http://codepen.io/tomhodgins/pen/Lpmmzy)
- [Pricing Chart where column width defined by column count](http://codepen.io/tomhodgins/pen/xGEojN)

Is this the sort of functionality you're looking to express? The way we count it's the same number as `elements[j].children.length` would give :D

-- 
GitHub Notification of comment by tomhodgins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1176#issuecomment-292175001 using your GitHub account
Received on Thursday, 6 April 2017 13:30:37 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:11 UTC