Solving Problems With Selectors
by @heydonworks
“CSS is so badly designed. It should be more modular and specificity is a PITA and it just doesn’t make sense”
Translated by
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/1332943/bing.png)
“I like javascript”
button {
/* define styles */
}
if (button) {
// define styles
}
button[disabled] {
/* define styles */
}
if (button && disabled) {
// define styles
}
button:not([disabled]) {
/* define styles */
}
if (button && !disabled) {
// define styles
}
(function() {
styles = {};
if (button) {
styles.button = {
'background-color': 'red'
}
}
return styles;
})();
a stylesheet
YOU DON'T NEED TO GET JAVASCRIPT INVOLVED WITH CSS. IT WON'T ADD ANYTHING USEFUL.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/1333019/tyson.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/1334330/ternary.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/1332937/you-dont-say.png)
div
> div:first-child
> div:first-child::before {
content: ' '
}
button:empty:not([aria-label]):not([aria-labelledby])::after {
content: ' '
}
*:not([class*='__']) > *:not([class*='__'])::after {
content: ' '
}
Dynamic Content
needs
Dynamic Layout
<div class="grid">
<div class="grid__item two-thirds">
<!-- content -->
</div>
<div class="grid__item one-third">
<!-- content -->
</div>
</div>
Grid System Prescription
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/1342198/evaluation.png)
Evaluating divisibility
:nth-last-child(3n):first-child,
:nth-last-child(3n):first-child ~ * {
width: 33.333%;
}
:nth-last-child(4n):first-child,
:nth-last-child(4n):first-child ~ * {
width: 25%;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/1341899/divisible_by_3.png)
9 items
(divisible by 3)
:nth-last-child(3n):first-child,
:nth-last-child(3n):first-child ~ * {
width: 33.333%;
}
:nth-last-child(4n):first-child,
:nth-last-child(4n):first-child ~ * {
width: 25%;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/1341928/divisible_by_4.png)
8 items
(divisible by 4)
:nth-last-child(3n):first-child,
:nth-last-child(3n):first-child ~ * {
width: 33.333%;
}
:nth-last-child(4n):first-child,
:nth-last-child(4n):first-child ~ * {
width: 25%;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/1341972/divisible_by_7.png)
7 items
(divisible by 1)
Prime Numbers
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/1343056/upset.png)
Upsetting
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/1343315/Selection_070.png)
Then @BinaryScenery showed me this...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/1343353/dog.gif)
Primes and multiples of primes
6n+1 and 6n-1
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/1345822/prime_configs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/1345855/ffffffflex.png)
FFFFFFFFFFF
FFFFFFFFFF
FFFFFFFFF
FFFLEXBOX
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/1351424/pacman.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/1347432/luke.jpeg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/1347432/luke.jpeg)
×
flex-flow: row wrap;
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/1348669/flex1.png)
flex-flow: row wrap;
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/1348672/flex2.png)
flex-flow: row wrap;
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/1348687/flex3.png)
flex-flow: row wrap;
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/1348690/flex4.png)
flex-flow: row wrap;
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/1348696/flex5.png)
flex-flow: row wrap;
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/1348703/flex6.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/1351132/ChaosLogo.jpg)
(controlled)
li:nth-child(3n - 1) {
min-width: 25%;
}
li:nth-child(5n - 1) {
min-width: 33.333%;
}
li:nth-child(7n - 1) {
min-width: 50%;
}
li:nth-child(11n - 1) {
min-width: 66.666%;
}
MAXIMAL HETEROGENEITY!!!
Quantity thresholds
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/1351585/squids.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/1351596/Selection_074.png)
The @Heydonworks ALA Wildlife Collection
- Baby weasel riding a woodpecker
- Horse
- Bear
A “quantity query”
:nth-last-child(n+8),
:nth-last-child(n+8) ~ * {
/* styles elements that occur in quantities of eight or more */
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/1361009/beavis.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/1357419/Selection_079.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/1357414/Selection_078.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/1357409/Selection_077.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/1361033/kid_crying_line_art.png)
“that CSS is
ugly”
/* For styling elements in quantities of 8 or more */
:nth-last-child(n+8),
:nth-last-child(n+8) ~ * {
max-width: 20%;
}
WRITE COMMENTS OBVS
@danielguillan has a
Sass mixin
@include at-least(8) {
/* properties */
}
...which @pascalduez converted into a postCSS plugin...
:at-least(8) {
/* properties */
}
...which is kind of like the
javascript...
if (elems.length >= 8) {
/* properties */
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/1430647/Selection_096.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/1430650/Selection_097.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/1430653/ded.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/1431077/Selection_099.png)
Thank You!
Solving Problems With Selectors
By heydon
Solving Problems With Selectors
- 11,126