It's not possible to generate a random number(and thus random color) using only CSS & HTML. Javascript or a server side language like PHP would be needed.
However you could simulate random colour by having a list of items and have each note a random colour. But random colour chosen would be the same every time you reset the page.
HTML
<ul class="sticky">
<li>Note text</li>
<li>Note text</li>
<li>Note text</li>
</ul>
CSS
.sticky li { background-color: red; }
.sticky li:nth-child(2n) { background-color: green; }
.sticky li:nth-child(3n) { background-color: yellow; }
.sticky li:nth-child(5n) { background-color: blue; }
In this case the note sequence would be
red, green, yellow, green, blue, green, red, green, yellow, blue
Which would give the first time user a feeling of random.
Where 2n and 3n have the same values, 3n will take precedence, and where 3n and 5n have the same values, 5n will take precedence, and so on.
Method in the link you posted is similar to what I wrote. See this section for random color
ul li:nth-child(even) a{
-o-transform:rotate(4deg);
-webkit-transform:rotate(4deg);
-moz-transform:rotate(4deg);
position:relative;
top:5px;
background:#cfc;
}
ul li:nth-child(3n) a{
-o-transform:rotate(-3deg);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
position:relative;
top:-5px;
background:#ccf;
}
You've changed the question quite a bit but if you want to apply the same effect to the div instead of 'ul li try changing occurrences of '.sticky li:nth-child' to 'div.sticky:nth-child
