CSS: Selecting lines: nth-line proposal

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.

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

One thought on “CSS: Selecting lines: nth-line proposal”

Leave a Reply

Note: Only a member of this blog may post a comment.