A partial archive of discourse.wicg.io as of Saturday February 24, 2024.

Proposal for more pseudo-elements


We have pseudo-elements ::first-letter and ::first-line and this is all we can use to select specific parts of text. Hereby I propose a full set of pseudo-elements akin to the child selector pseudo-classes.

  • ::first-word

  • ::first-sentence

  • ::nth-letter(an+b)

  • ::nth-word(an+b)

  • ::nth-line(an+b)

  • ::nth-sentence(an+b)

  • ::last-letter

  • ::last-word

  • ::last-line

  • ::last-sentence

  • ::last-nth-letter

  • ::last-nth-word

  • ::last-nth-line

  • ::last-nth-sentence

  • ::each-word

  • ::each-line

  • ::each-sentence

  • ::only-letter

  • ::only-word

  • ::only-line

  • ::only-sentence

and combinations thereof:

  • ::nth-word(an+b)::first-letter
  • ::nth-word(an+b)::nth-letter(an+b)
  • ::nth-word(an+b)::last-letter
  • ::only-sentence::last-letter and so on.

Practical examples:

Make the first word of each paragraph uppercase:

p::first-word { text-transform: uppercase; }

Make the first word of each sentence uppercase:

p::each-sentence::first-word { text-transform: uppercase; }

This is especially useful for Georgian text where capitalization is applied to whole words and not to the first letter of a word like in Western text.

Bustrophedon text:

p::nth-line(2n+2) { direction: rtl; }


The driving objective here (besides utility) is performance. If the style changes, how good does the re-computation scale? Both ::first-letter and ::first-line can be implemented efficiently. For ::each-word, the browser first needs to split each line by space/punctuation etc. For ::each-line, there is no additional overhead, the browser already stores the lines. For ::each-line::first-letter there is considerable overhead when re-distributing lines. I don’t think that ‘word’ and ‘sentence’ will be adopted (any time soon).


Just a side question …

Why would Georgians use CSS to get the capitalization correct instead of just typing capital letters?


Why would Westerners use text-transform:uppercase instead of writing the correct text?!