Skip to content

Instantly share code, notes, and snippets.

@csswizardry

csswizardry/nesting.css

Created February 25, 2021 16:49
Show Gist options
  • Save csswizardry/ad11c8dc6e1bc20dd602312196974de6 to your computer and use it in GitHub Desktop.
Save csswizardry/ad11c8dc6e1bc20dd602312196974de6 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. csswizardry created this gist Feb 25, 2021.
    34 changes: 34 additions & 0 deletions nesting.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,34 @@
    /**
    * 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; }