Multicoloured text highlighting in cSS | Pink News

As multiple paragraphs of text are selected, each one gets highlighted with a different colour from the LGBTQA+ flag.
Seeing the different colour highlights coming into effect is such a satisfying piece of hidden UX.

A clever UX idea discovered on Pink News: each paragraph of text has a different highlight colour, so as you select parts of an article to copy elsewhere it reveals the LGBTQA+ flag. They're using a simple CSS pattern with several similar selectors along the lines of:

p:nth-child(6n+1)::selection {
   background-color: rgba(157,236,255,0.25);
}

Extremely effective 👏

Explore Other Notes

⬅ Newer

National park "honest" reviews

A wonderful collection of hand-illustrated one-star reviews for some of the most beautiful wilderness areas on the planet. Originally covered the great US National Parks, but has recently begun …

  • <!DOCTYPE html> <html> <head> <title></title> </head> <body> <p>A&nbsp;clever UX idea discovered on Pink News:&nbsp;each paragraph of text has a different highlight colour, so as you select parts of an article to copy elsewhere it reveals the LGBTQA+ flag. They're using …</p> </body> </html>
  • Murray Adcock.
Journal permalink