Skip to content

Instantly share code, notes, and snippets.

@tomhodgins

tomhodgins/caffeinated-css.css

Created April 9, 2019 14:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tomhodgins/e7a1e755c89322768fb0903482ae77ac to your computer and use it in GitHub Desktop.
Save tomhodgins/e7a1e755c89322768fb0903482ae77ac to your computer and use it in GitHub Desktop.
Download ZIP
Raw
caffeinated-css.css
/* Valid CSS, polyfillable */
.card-details {
transition: background-color .2s;
}
.list-card-details[--has='.member-avatar[title^="Tommy Hodgins"]'] {
background-color: rgb(200, 225, 255);
}
.list-card-details[--has='.member-avatar[title^="Dave Redfern"]'] {
background-color: rgb(200, 255, 225);
}
Raw
css.css
/* Valid CSS but unsupported */
.card-details {
transition: background-color .2s;
}
.list-card-details:has(.member-avatar[title^="Tommy Hodgins"]) {
background-color: rgb(200, 225, 255);
}
.list-card-details:has(.member-avatar[title^="Dave Redfern"]) {
background-color: rgb(200, 255, 225);
}
Raw
jsincss.js
`
/* jsincss using a template string and a has() plugin */
.card-details {
transition: background-color .2s;
}
${has('.list-card-details', '.member-avatar[title^="Tommy Hodgins"]', `
background-color: rgb(200, 225, 255);
`)}
${has('.list-card-details', '.member-avatar[title^="Dave Redfern"]', `
background-color: rgb(200, 255, 225);
`)}
`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment