A while ago I wrote a thread where I was teaching someone CSS. Well, they changed their mind I think, so the lessons I thought up have nowhere to go. So I'll post them up as challenges. Today's is relatively straightforward - get this checkerboard (webkit engine rendering)...

testRender2.png

From this HTML

Code html:
<!DOCTYPE html>
<html>
   <body>
	<div>
		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
	</div>
</body>
</html>

Now the tricky part. The point of the exercise is to get comfortable with the direct child operator in CSS ">", and the nth-child psuedo element. My answer will be posted Friday. I created the render above with only 6 statements.