CSS3 - selektory pseudoelementów

CSS3 - pseudoelement :selection

wtorek, 08 luty 2011 23:54 pwimmer
Drukuj

Tematy: :selection

W CSS3 możemy definiować kolor zaznaczonego tekstu i kolor tła zaznaczenia. Wykorzystujemy w tym celu pseudoelement selection.

W przykładach zastosowano następujący kod (używamy tu klas .green, .red itd. dla odróżnienia nagłówków):

h1.green::selection {background: green; color:blue;} 
h1.red::selection {background: red; color:white;} 
h1.blue::selection {background: blue; color:red;} 
h1.yellow::selection {background: yellow; color:black;} 

Dla Firefoksa trzeba zastosować dodatkowo osobne deklaracje z prefiksem, a więc -moz-selection.

Poniższe fragmenty tekstu (nagłówki h1) zostały opatrzone odpowiednimi klasami, np. h1 class=”green” czy h1 class=”red”.

Niebieski tekst na zielonym tle.

Biały tekst na czerwonym tle.

Czerwony tekst na niebieskim tle.

Czarny tekst na żółtym tle.

Obejmij blokiem wyraz, wiersz czy kilka kolejnych wierszy i obserwuj zmianę kolorów.


Interpretacja: Chrome, Internet Explorer 9, Opera, Firefox 3.6