CSS – Reveal Element Ancestry

Oftentimes, I find it difficult to conceptualize the exact ancestry of an element in a complicated page. I wrote these styling rules to dynamically reveal the structure of a page as I view it. The style reveals the structure of the document immediately below the cursor making each nesting obvious.  When the cursor hovers over an element, it and each of its parents are given a border, aesthetic padding and rounding  and slight zooming  to make the element’s nested structure pop out. This is a dynamic change that occurs real-time as the cursor moves across the page.  Due to restrictions on blog content, the renderings at the end of this post are static.

HTML

< div class=”TierOne”>

<div class=”TierTwo”>

<div class=”TierThree A”>

A

</div

<div class=”TierThree B”>

B

</div>

</div>

</div>

CSS

*:hover

{

border: 5px black solid;

border-radius: 10px;

margin: 5px;

padding: 5px;

zoom: 1.1;

}
Result
Mouse not on page

A
B

Mouse over Tier One

A
B

Mouse over Tier Two

A
B

Mouse over Tier Three A

A
B

Mouse over TierThree B

A
B