CSS

* { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }
* * * * * * * { background-color: rgba(255,0,0,.2); }
* * * * * * * * { background-color: rgba(0,255,0,.2); }
* * * * * * * * * { background-color: rgba(0,0,255,.2); }

Source: https://dev.to/gajus/my-favorite-css-hack-32g3

REM units

html {
font-size: 6.25%; /* =1px */
/* Since most browsers have a default value of 16px. Alternatively, people quite often
use 62.5% instead and adjust children REM units accordingly. */
}
body {
font-size: 14rem; /* =14px */
}
h1 {
font-size: 24rem; /* =24px */
}

Default HTML font size: https://stackoverflow.com/questions/24542508/default-html-font-size

Even better approach: https://css-tricks.com/rems-ems/

CSS selectors

https://gist.github.com/magicznyleszek/809a69dd05e1d5f12d01

/* Present: selects .foo elements with bar attribute present, regardless of its value */
.foo[bar] {
fum: baz;
}
/* Exact: selects .foo elements where the bar attribute has the exact value of fum */
.foo[bar='fum'] {
baz: qux;
}
/* Whitespace separated: selects .foo elements with bar attribute values contain specified partial value of fum (whitespace separated) */
.foo[bar~='fum'] {
baz: qux;
}
/* Hyphen separated: selects .foo elements with bar attribute values contain specified partial value of fum immediately followed by hyphen (-) character */
.foo[bar|='fum'] {
baz: qux;
}
/* Begins with: selects .foo elements where the bar attribute begins with fum */
.foo[bar^='fum'] {
baz: qux;
}
/* Ends with: selects .foo elements where the bar attribute ends with fum */
.foo[bar$='fum'] {
baz: qux;
}
/* Containts: selects .foo elements where the bar attribute contains string fum followed and preceded by any number of other characters */
.foo[bar*='fum'] {
baz: qux;
}