Style A Paragraph Line by Line

Is it possible so style a paragraph line by line with CSS? Say first line will have the green color, second line the red, and the third line the yellow. Note that the paragraph is native and no other tag is used inside the paragraph. I just want to change the style w开发者_开发问答ith CSS if possible.

Thanks.

There is a :first-line pseudo-element in CSS that lets you style the first line of the paragraph differently from the other lines, so you could color the first line green. But I don't know of a way to specify the second line as distinct from the third line, unless you add some type of delimiter element such as span.

The only way you can do this, without changing your markup, is with lettering.js. It's an jquery plugin, which automatically adds the needed markup which can be styled with CSS.

Take a look in their wiki, there are the needed examples for line by line styling.

More information also here: http://letteringjs.com/

In addition to Jacobs and emjay's answer.

HTML is describing a document, the semantics of each element.

A paragraph can have several lines but you need to tell it so. Like:

<p class="line-by-line">
    <p>line 1 of paragraph</p>
    <p>line 2 of paragraph</p>
</p>

Then you can use the n-th selector:

p.line-by-line > p:nth-child(1) {
     color: green;
}

p.line-by-line > p:nth-child(2) {
     color: red;
}

Detecting a semantical meaning without having it defined in the markup is tricky and not what HTML stands for. Having a <p></p> does not imply how many lines the paragraph consists of. Imagine different sizes of screens and viewports.