Skip to content

Instantly share code, notes, and snippets.

@amcgregor

amcgregor/xray.css

Last active September 30, 2019 15:10
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 amcgregor/98a957704a9d04eb2098ae23ec36e147 to your computer and use it in GitHub Desktop.
Save amcgregor/98a957704a9d04eb2098ae23ec36e147 to your computer and use it in GitHub Desktop.
Download ZIP
"Xray CSS" to highlight element nesting and stacking.
Raw
xray.css
body { background: black !important; }
body > * { background: #111 !important; }
body > * > * { background: #222 !important; }
body > * > * > * { background: #333 !important; }
body > * > * > * > * { background: #444 !important; }
body > * > * > * > * > * { background: #555 !important; }
body > * > * > * > * > * > * { background: #666 !important; }
body > * > * > * > * > * > * > * { background: #777 !important; }
body > * > * > * > * > * > * > * > * { background: #888 !important; }
body > * > * > * > * > * > * > * > * > * { background: #999 !important; }
body > * > * > * > * > * > * > * > * > * > * { background: #AAA !important; }
body > * > * > * > * > * > * > * > * > * > * > * { background: #BBB !important; }
body > * > * > * > * > * > * > * > * > * > * > * > * { background: #CCC !important; }
body > * > * > * > * > * > * > * > * > * > * > * > * > * { background: #DDD !important; }
body > * > * > * > * > * > * > * > * > * > * > * > * > * > * { background: #EEE !important; }
body > * > * > * > * > * > * > * > * > * > * > * > * > * > * > * { background: #FFF !important; }
/* Alternate (though less predictable) approach:
* { background: rgba(0,0,0,0.1); }
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment