DOM Depth Visualiser

nesting.css

/**
 * 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; }