- From: Tommy Hodgins via GitHub <sysbot+gh@w3.org>
- Date: Thu, 06 Apr 2017 13:30:31 +0000
- To: public-css-archive@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