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

CSS – float:center;

In Cascading Style Sheets (CSS), the floating style is used to float elements horizontally, this means that an element can either be floated left or right. A floated element will move as far to the left or right as it can inside the parent element. To create responsive web pages that scale well, I need elements to float in the center of the parent element. Although center floats are not supported directly in CSS, CSS can be used to center float. The parent element simply applies “text-align: center” and the child applies “display inline-block”. Further styling can set margins, padding, and other attributes as usual.

HTML

< div class=”parent”>

<div class=”child”>

1

</div>

<div class=”child”>

2

</div>

</div>

CSS

.parent { text-align: center;}

.child {display:inline-block;}

Result

1
2