[CSS] Jak zrobić kolorowe zaznaczenie tekstu?

Po dłuższej przerwie postanowiłem napisać nowy artykuł związany z arkuszami stylów CSS.
Bardzo możliwe, że kiedyś spotkałeś/aś się na stronie WWW z dość nietypowym sposobem zaznaczania tekstu, który zamiast domyślnego koloru zaznaczenia miał jakiś inny.
W tym artykule dowiesz się jak to można zrobić.

Najpierw musimy określić dla jakiego elementu strony ma występować to efektowne podkreślenie. Dla naszego ćwiczenia takie zaznaczenie będzie odnosiło się do nastepującej struktury strony:

<p id="niebieski">Róży a Pan świata wie, że spudłuje. szarak, gracz nie zdradzić swego roztargnienia: Prawda - smyk w powiecie. Lubił bardzo dobitnie malował.
</p><p id="czerwony">Nawet stary Dąbrowskiego usłyszeć mazurek. biegał po wolności wykwita. Tylko smutno, że zbyt wykwintny na złość Rejentowi, Że ją witali.
</p>

Jak widać, to nie jest nic skomplikowanego. Teraz pora na odpowiednie style CSS, które nadadzą trochę magii naszej stronie:

#czerwony::selection {
	background: red;
	color: #fff;
}
#czerwony::-moz-selection {
	background: red;
	color: #fff;
}
#niebieski::selection {
	background: blue;
	color: #fff;
}
#niebieski::-moz-selection {
	background: blue;
	color: #fff;
}

Patrząc na powyższy kawałek kodu widać, że wykorzystaliśmy pseudoklasę selection oraz jej odpowiednika dla przeglądarki Mozilla Firefox -moze-selection.
Widać też, że kawałki kodu się powtarzają. Niestety nie da się tego uniknąć i zapisać #niebieski::selection, #niebieski::-moz-selection w jednej linii, a to dlatego, że wtedy efekt nie będzie działał w przeglądarce Firefox.
Efekt będzie działał w przeglądarkach Mozilla Firefox, Opera, Google Chrome, Safari oraz w Internet Explorer 9.
W starszych wersjach Internet Explorera efekt nie zadziała.
Lecz muszę stwierdzić, że nowa wersja IE jest przeglądarką z którą w końcu będzie można dobrze pracować przy budowaniu stron WWW.
Jeśli jesteś fanem/fanką Internet Explorera to polecam Ci zainstalowanie jej najnowszej wersji i nie zrażaj się tym, że jest to wersja beta (można ją zainstalować w systemach Windows Vista i nowszych).

Demo z powyższego przykładu można zobaczyć pod tym linkiem: kolorowe zaznaczenie tekstu w CSS