Skip to content

Instantly share code, notes, and snippets.

@dfkaye

dfkaye/relative-selectors.css

Created August 6, 2019 04:56
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 dfkaye/f5251719f50e1cdac32c287a4eca08a5 to your computer and use it in GitHub Desktop.
Save dfkaye/f5251719f50e1cdac32c287a4eca08a5 to your computer and use it in GitHub Desktop.
Download ZIP
CSS relative selectors
Raw
relative-selectors.css
/* 5 Aug 2019 */
/* https://twitter.com/dfkaye/status/1158602465345884160 */
/*
* Figure out why there are no CSS selectors for the following and - suddenly - you will "get" CSS:
*
* - previous adjacent sibling
* - previous general sibling
* - direct ancestor (parent)
* - general ancestor
*/
/* prompted by this thread */
/* David Khoursid, 1 Aug 2019 */
/* https://twitter.com/DavidKPiano/status/1157019363255508992 */
.red + .blue /*(adjacent subsequent sibling)*/
.red ~ .blue /*(general subsequent sibling)*/
.red > .blue /*(direct descendent)*/
/* snark removed here... */
.red .blue /*(general descendant - any level)*/
/* follow-up is interesting */
/* https://twitter.com/DavidKPiano/status/1157019363255508992 */
.red > * > .blue /*(grandchild)*/
.red * .blue /*(descendant but not direct)*/
/* and then... */
.red ~ * > .blue /*(niece or nephew)*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment