{"id":5194,"date":"2025-02-14T11:44:54","date_gmt":"2025-02-14T16:44:54","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=5194"},"modified":"2025-02-14T11:44:56","modified_gmt":"2025-02-14T16:44:56","slug":"rainbow-selection-in-css","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/rainbow-selection-in-css\/","title":{"rendered":"Rainbow Selection in CSS"},"content":{"rendered":"\n

There is a ::selection<\/code> pseudo class selector in CSS that allows you to style what content (mostly: text) looks like when it’s selected. <\/p>\n\n\n\n

Say your website has pretty strong orange-colored branding, you could use this to extend the feel of that branding. <\/p>\n\n\n\n

\"Geoff<\/figure>\n\n\n\n

Like:<\/p>\n\n\n

html<\/span> {\n  --brandColor<\/span>: orange;\n}\n::selection<\/span> {\n  background-color<\/span>: var<\/span>(--brandColor);\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
There is really only a couple of things you can set on ::selection<\/code> (see the allowable properties<\/a> bit on MDN), which makes sense. You wouldn’t want to be changing font-size<\/code> on selection or anything like that as it would get messy quickly.<\/p>\n\n\n\n
I was on the Lit documentation<\/a> site the other day and highlighted some text and saw this:<\/p>\n\n\n\n
\"Lit<\/figure>\n\n\n\n
At first I wasn’t even sure if it was intentional, but I sure thought it was neat! I figured it was just :nth-child()<\/code> trickery where you hang ::selection<\/code> off the end of it. Like:<\/p>\n\n\n
:nth-child(5n)<\/span>::selection<\/span> {\n  background<\/span>: oklch<\/span>(70%<\/span> 0.111<\/span> 0<\/span> \/ 72.27%<\/span>)\n}\n:nth-child(5n+1)<\/span>::selection<\/span> {\n  background<\/span>: oklch<\/span>(70%<\/span> 0.111<\/span> 40<\/span> \/ 72.27%<\/span>)\n}\n:nth-child(5n+2)<\/span>::selection<\/span> {\n  background<\/span>: oklch<\/span>(70%<\/span> 0.111<\/span> 80<\/span> \/ 72.27%<\/span>)\n}\n:nth-child(5n+3)<\/span>::selection<\/span> {\n  background<\/span>: oklch<\/span>(70%<\/span> 0.111<\/span> 120<\/span> \/ 72.27%<\/span>)\n}\n:nth-child(5n+4)<\/span>::selection<\/span> {\n  background<\/span>: oklch<\/span>(70%<\/span> 0.111<\/span> 160<\/span> \/ 72.27%<\/span>)\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
So I made a demo of that and it works great:<\/p>\n\n\n\n