jwhing
9/10/2019 - 2:24 PM

CSS: progressive highlighting for each node depth

CSS hack courtesy of Gajus Kuizinas, https://dev.to/gajus/my-favorite-css-hack-32g3 This makes the highlighting of each element intensify according to how deep it is in the document tree. Useful for diagnosing layout issues. (Visit link for screenshot)

diagnostic_highlighting.css
content_copyfile_download
* { 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); }

/* Courtesy of Gajus Kuizinas, https://dev.to/gajus/my-favorite-css-hack-32g3
This makes the highlighting of each element intensify according to how deep it is in the document tree. */