CodePen

HTML

            
              <div class="box">
	<h4>Lorem ipsum</h4>
	<p>At vero eos et accusamus et iusto odio dignissimos ducimus:</p>
	<ol>
	<li class="bg"><p>Nam libero tempore</p></li>
	<li class="no-bg"><p>Et voluptates repudiandae </p></li>
	<li class="bg"><p>Neque porro quisquam</p></li>
	<li class="no-bg"><p>Quis autem vel eum</p></li>
	<li class="bg"><p>Sed ut perspiciatis</p></li>
	</ol>
	</div>
            
          
!

CSS

            
              div.box {
		margin: 1.6em 0 1em 0;
    padding: 0 0 0 1em;
		border: 2px solid #7db447;
	}
	ol {
		margin: 1em;
		padding: 0.1em 0 0.8em 1.2em;
	}
	.no-bg, .bg {
		font-family: "DejaVu Sans", sans-serif;
		font-weight: bold;
		padding: 0.1em 0 0.8em 1em;
	}
	.bg {
		background-color: #e3f3d4;
	}
	.no-bg p, .bg p {
		font-family: "DejaVu Serif", serif;
	}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................