CSS Debug Snippet

Here's my topo-view CSS, http://alicious.com/2009/topographical-web-page-view/ - the idea being it's a sort of reverse wireframe. Hardly ever used it.

    /* =================================
    CSS topological display stylesheet
    author: pbhj
    link: http://alicious.com/
    license: (c) 2009, CC-BY-SA
    ================================= */

    * { color:transparent!important; background-color:transparent!important; }

    div > div { border:1px #000 solid!important; background:#111!important; color:#111!important; }
    div > div > div { border:1px #222 solid!important; background:#333!important; color:#333!important; }
    div > div > div > div { border:1px #444 solid!important; background:#555!important; color:#555!important; }

    p, blockquote, pre, td {color:#303!important; background:#303!important; border-color:#636!important;}

    span, dd, dt, li, strong, span, em { color:#000!important; background:#000!important; border-color:#AAA!important;}

    a, a:hover { color:#33F!important; background:#33F!important; border-color:#66F!important; }

    textarea, input, select, button { color:#0c0!important; background:#0c0!important; border-color:#030!important;}

    h2,h3,h4,h5 { display:block!important; color:#A00!important; background:#A00!important; border-color:#600!important;  }

    h1 { display:block!important; color:#F00!important; background:#F00!important; border-color:#300!important;  }

    img { background:#EEE!important; color:#EEE!important; opacity:0.2!important; }

"The code adds different coloured borders to the assets depending on its level."

  * { outline: 2px dotted red }

  * * { outline: 2px dotted green }

  * * * { outline: 2px dotted orange }

  * * * * { outline: 2px dotted blue }

  * * * * * { outline: 1px solid red }

  * * * * * * { outline: 1px solid green }

  * * * * * * * { outline: 1px solid orange }

  * * * * * * * * { outline: 1px solid blue }

nice trick. especially in the days before firebug as i would imagine :P