Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
CSS3 - selektory pseudoelementów

CSS3 - pseudoelement :selection

Email Drukuj PDF

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

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V