Kompx.com or Compmiscellanea.com

Pure CSS responsive square

Windows : Internet Explorer 8.0+, Firefox 1.0+, Google Chrome, Opera 4.0+, Safari 3.1+, SeaMonkey 1.0+ [ 1 ].

Linux : Firefox 1.0+, Google Chrome / Chromium, Opera 5.0+, SeaMonkey 1.0+ [ 2 ], NetSurf 3.0+, Hv3.

Responsive CSS square. No JavaScript / jQuery. Example:



<div class="square">&nbsp;</div>

CSS. Code:

.square {width: 10%; height: 0; padding-bottom: 10%;}

/* Extra CSS, just styling the look: */

.square {background: #fd0;}

Width: 10% makes the .square div to be 10% of the parent element's width. Height: 0 eliminates any height the element may have, letting padding-bottom: 10% to make it exactly equal to the width. So each time the width of the parent container is changed, the element's size gets recalculated.

Based on the concept - CSS grid with responsive square cells:

Square cell 1
Square cell 2
Square cell 3
Square cell 4
Square cell 5
Square cell 6
Square cell 7
Square cell 8

[ 1 ]

As well as Netscape 6.01+, Mozilla 0.6+.

[ 2 ]

As well as Netscape 6.01+, Mozilla 0.6+.

Aliosque subditos et thema


Bold numbers in ordered lists


Numbers in an ordered list made bold without having any extra HTML tags added: List item List item List item HTML / XHTML. Code: <ol> <li>List item</li> <li>List item</li> <li>List item</li> </ol> CSS. Code: ol {counter-reset: item;} ol li {display: block;} ol li:before {content: counter(item) ". "; counter-increment: item; font-weight: bold;} There is no obvious way at the moment to style only numbers marking ordered list items. A workaround is to use a CSS counter instead of the default automatic numbering of ordered lists. The way a CSS counter is started allows to style specifically the marking numbers. Like in the example, where numbers in an ordered list are styled bold. This method also lets to use other characters after the numbers - besides dots. Like a parenthesis / round bracket instead of a dot. Or handling of space between the number, punctuation mark and the content proper of list item. [ 1 ] As well as Netscape 9.0+. [ 2 ] As well as Netscape 9.0+.

CSS for a range of elements


Styling a range of elements. Here from the 1st to the 3rd one - changing background color. Example:         HTML / XHTML. Code: <div>&nbsp;</div> <div>&nbsp;</div> <div>&nbsp;</div> <div>&nbsp;</div> CSS. Code: div:nth-of-type(-n+3) {background: #f66;} /* Extra CSS, just styling the look: */ div {width: 100%; margin-top: 5px; background: #066;} Note: nth-child may also be used instead.