Among the most requested features that web developers actually need there is the ability of selecting lines using CSS. CSS specifications have introduced the :first-line
pseudo-element back in 1998. This selectors selects the very first line of a block-level element. However, with the introduction of the CSS3 selectors new possibilities came to the attention of CSS developers. CSS3 selectors are now able to keep track of the n-th occurrences of a given element through the nth-
s structural pseudo-classes. For example, to select any odd row of a table, now you can write:
tr:nth-child(odd) { background: silver; }
So many developers started wondering why this feature cannot be achieved with text lines. Basically, the first thing to define is the delimiting character for a new line. Typically, this is \n
in most environments, but specific user-agent implementations vary when it comes to the HTML source organization. For example, Internet Explorer has some problems with the \n
character on elements such as pre
so that it's not always possible to create new lines using the aforementioned character.
However, when browsers will come to an agreement and normalization of new line delimiters, one could write the following:
pre:nth-line(odd) { background: silver; }
An hypothetical nth-line
pseudo-class should select lines according to the parameters passed to it, which are the same as the nth-child
pseudo-class mentioned earlier. Of course this is only an hypothesis, but it's worth mentioning here.
Not to mention it'd make adding line numbers to an element easier. For codeblocks, I've had to use <ol> inside of <code>