styling each line inside pre with css

Question

i have html code

<pre>
line 1
line 2
line 3
</pre>

how can i put some css style to the "lines" inside <pre>, without adding other wrapper into it?

what i mean is something like

pre lines{ color: red}

i'm having difficulties on finding the css selector for that. Thanks in advance.

Answer 1

You can use this little CSS3 trick, with gradients. This will create automatically, without extra spans, a "zebra" effect:

background: #555;
background-image: -webkit-linear-gradient(#555 50%, #505050 50%);
background-image:    -moz-linear-gradient(#555 50%, #505050 50%);
background-image:     -ms-linear-gradient(#555 50%, #505050 50%);
background-image:      -o-linear-gradient(#555 50%, #505050 50%);
background-image:         linear-gradient(#555 50%, #505050 50%);
background-position: 0 0;
background-repeat: repeat;
background-size: 4.5em 4.5em;

Try different CSS "line-height" so that the text appears correctly.

see: http://www.dte.web.id/2012/03/css-only-zebra-striped-pre-tag.html#.UUoV6lugkoM