Zebra-stripe Ordered list using CSS

[Ricki]

I have tried to develop my own code snippet style, and below is an example screenshot of what I have obtained so far:

This was achieved using the following CSS rules for the ordered list:

ol.codeSnip {
	color: #555;
	background-color: #edd;
	font-family: Consolas, Lucida Console, Monaco, monospace;
	font-size: 1em;
	border: 1px solid #bbb;
	border-left: 4px solid #ac6;
	margin: 0em 0em 0em 2em;
	padding: 0em 0em 0em 5em;
	letter-spacing: 0em;
}

.codeSnip p.odd, .codeSnip p.even {
	font-family: Consolas, Lucida Console, Monaco, monospace;
	margin: 0em;
	padding-left: 1em;
	border-left: 1px solid #bbb;
	letter-spacing: 0.1em;
}

.codeSnip p.odd {
	background-color: #eee;
}

.codeSnip p.even {
	background-color: #f5f5f5;
}

And this html code is a mix of ordered lists and paragraph styles (please ignore the span classes):

<ol class="codeSnip">
	<li><p class="odd">  
		<span class="commentTag">&lt;!-- this is a comment --&gt; /*  hello  */</span>  
	</p></li>
			
	<li><p class="even">
		some text
	</p></li>
	
	<li><p class="odd">
		<span class="normalTag">&lt;html&gt;</span>
	</p></li>
	
	<li><p class="even">
		<span class="propertyTag"> $port = </span>
		<span class="valueTag">	22px</span>
	</p></li>
</ol>

Now, visually I am quite happy with it, but code wise it sucks - it seems a little hacky and I'm sure there must be a more elegant, shorter way of achieving the same results.

Basically, I'm looking at utilising li:nth-child(odd) (and the even equivalent) but no matter what I try I can't seem to get it to work. Ideally I want to get rid of the <p class="..."> altogether, if not, at least reduced down to <p>.

So from this:

<ol class="codeSnip">
	<li><p class="odd">...</p></li>		
	<li><p class="even">...</p></li>
</ol>

To this:

<ol class="codeSnip">
	<li>...</li>
	<li>...</li>
</ol>

But no matter what I try, I just can't seem to get it to work. One of the biggest problems seems to be getting the line-number gutter a separate colour and getting the zebra-stripe line. Can anyone suggest fixes to the code to get what I'm after? Also, any major problems with my CSS?

Many thanks in advance.

 

[Ricki]

Personally if I had to do it though, I'd just set two css classes (odd row/even row) and output it using a loop using php.

That's what I will be doing eventually, it's just that I prefer to have minimalistic code and so want to 'perfect' the list now. Once that is done it will be implemented within php, but trying to do both at the same time is just making myself extra work in my opinion.

 

[Ricki]

1. Unless there's a knock-on reason that I can't see, you don't need paragraph elements inside the list elements, as they're both block-level. Just style the <li>s.

This is where I was having most of the problems. I've just had a go again at styling the <li> and now it works! Sod's law really. Now I will see if I can get it to work without having to define a class in the text.

2. You don't need to specify a unit for "0" measurements in your CSS. "0em" is the same as "0px", "0in" or "0lightyears" for that matter. So just use "0". Yeah, I know, but it's one of those things I get all OCD about

lol, for the last 5 years of uni I've had the fact I must always state units on all measurements beaten into me by all my lecturers (I'm an engineer), it's finally taken effect! I also have a bit of OCD when it comes to not omitting zeros before the decimal point - I must write 0.6em not .6em; I just need to become lazy again

 

[Ricki]

Don't think of it as laziness, think of it as streamlining

Now that is pure genius

 

[Ricki]

Got a bit of code that does this? (the PHP part?)

There are a few things out there already, look at perhaps this link where there is an easy JavaScript method. Alternatively suarve provides a good link (see the 2nd post).

If you can wait a while I'll be creating my own code for this entire thing really soon.