Разноцветное выделение текста в CSS
::selection — это круто, но использование селекторов типа :nth-child(5n+2) — это гораздо интереснее.В CSS есть псевдоэлемент ::selection, позволяющий задать стиль контента (в основном текста) при его выделении.
Скажем, ваш сайт имеет довольно сильный брендинг в оранжевых тонах, их можно использовать, чтобы расширить ощущение этого брендинга.
На самом деле есть только пара вещей, которые можно установить для ё (см. раздел Разрешённые свойства на MDN), что вполне логично. Не стоит изменять font-size при выделении или что-то в этом роде, так как это быстро превратится в кашу.
На днях я зашёл на сайт документации Lit, выделил текст и увидел следующее:
Сначала я даже не был уверен, что это сделано намеренно, но это выглядит аккуратно! Подумал, что это просто :nth-child() трюк, когда в конце вешается ::selection. Что-то вроде:
:nth-child(5n)::selection {
background: oklch(70% 0.111 0 / 72.27%)
}
:nth-child(5n+1)::selection {
background: oklch(70% 0.111 40 / 72.27%)
}
:nth-child(5n+2)::selection {
background: oklch(70% 0.111 80 / 72.27%)
}
:nth-child(5n+3)::selection {
background: oklch(70% 0.111 120 / 72.27%)
}
:nth-child(5n+4)::selection {
background: oklch(70% 0.111 160 / 72.27%)
}Я сделал демку и оно отлично работает:
К сожалению, на iOS не работает.
В итоге я порылся на сайте Lit с помощью DevTools и увидел, что их подход в основном такой же, как предполагалось. За исключением того, что они используют color-mix() с основными цветами и задают как color, так и background.
Если вы, как любой здравомыслящий человек, подумали, почему бы не сделать полную радугу с помощью linear-gradient() то, конечно, к сожалению, градиенты — это фоновые изображения, которые в данном случае игнорируются, и поддерживается только background-color.