Skip to content

Instantly share code, notes, and snippets.

@whoisryosuke
Forked from csswizardry/nesting.css
Created February 25, 2021 16:55
Show Gist options
  • Save whoisryosuke/523b12bb90e33d96f4a33a92507f9183 to your computer and use it in GitHub Desktop.
Save whoisryosuke/523b12bb90e33d96f4a33a92507f9183 to your computer and use it in GitHub Desktop.
DOM Depth Visualiser
/**
* Tier 1 – Dotted
*/
* { outline: 2px dotted purple; }
* * { outline: 2px dotted blue; }
* * * { outline: 2px dotted green; }
* * * * { outline: 2px dotted yellow; }
* * * * * { outline: 2px dotted orange; }
* * * * * * { outline: 2px dotted red; }
/**
* Tier 2 – Dashed
*/
* * * * * * * { outline: 2px dashed purple; }
* * * * * * * * { outline: 2px dashed blue; }
* * * * * * * * * { outline: 2px dashed green; }
* * * * * * * * * * { outline: 2px dashed yellow; }
* * * * * * * * * * * { outline: 2px dashed orange; }
* * * * * * * * * * * * { outline: 2px dashed red; }
/**
* Tier 3 – Solid
*/
* * * * * * * * * * * * * { outline: 2px solid purple; }
* * * * * * * * * * * * * * { outline: 2px solid blue; }
* * * * * * * * * * * * * * * { outline: 2px solid green; }
* * * * * * * * * * * * * * * * { outline: 2px solid yellow; }
* * * * * * * * * * * * * * * * * { outline: 2px solid orange; }
* * * * * * * * * * * * * * * * * * { outline: 2px solid red; }
/**
* Tier z-index: 999999999999 !important; – Heavy
*/
* * * * * * * * * * * * * * * * * * * { outline: 10px solid red; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment