CSS :: выбор автоматически меняет цвет и цвет фона

Question

Я использую ::selection конструкцию CSS. Скажем, мой текст написан черным на белом фоне, но для некоторых элементов, например, синим, зеленым или красным. Мне бы хотелось, чтобы при выборе этого цвета цвет фона и фона менялся местами: обычный текст должен быть белым на черном, красный текст - белым на красном и т. Д.

Конечно, я знаю, как это сделать, установив конкретные правила для каждого вида текста, который у меня есть. Но мне интересно, существует ли простой способ сделать это автоматически, то есть без необходимости думать обо всех возможных видах текстов, которые у меня есть.

Answer 1

К сожалению, нет способа сделать это автоматически: самое близкое, что у нас есть, это взять выбранный цвет шрифта background-color: currentColor, но как только вы установите color на любое другое значение, currentColor примет это новое значение вместо исходного.

Значение этого правила:

::selection {
    background-color: currentColor;
    color: white;
}

На самом деле цвет текста и фона будет установлен на белый, потому что currentColor завершает вычисление до white, принимая после объявления color: white. Это независимо от того, поставили ли вы его до или после объявления background-color.

Вот интерактивная скрипка , чтобы показать вам, что я имею в виду.