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
“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.
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
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%;
}
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%;
}
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%;
}
7 items
(divisible by 1)
Prime Numbers
Upsetting
Then @BinaryScenery showed me this...
Primes and multiples of primes
6n+1 and 6n-1
FFFFFFFFFFF
FFFFFFFFFF
FFFFFFFFF
FFFLEXBOX
×
flex-flow: row wrap;
flex-flow: row wrap;
flex-flow: row wrap;
flex-flow: row wrap;
flex-flow: row wrap;
flex-flow: row wrap;
(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
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 */
}
“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 */
}
Thank You!