styling each line inside pre with css

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 wra开发者_如何学运维pper 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.

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

If you want add color to all lines in pre, just add

pre {color: red;}

But if you want to add color to some lines, you need extra markup:

<pre>
<span>Line1</span>
line2
<span>Line3</span>
</pre>

pre span {color: red;}