Ostatnio edytowany:

::selection

Autor: Virtual Patriot

Przeznaczenie selektora ::selection

      ::selection { ... }
    

Za pomocą selektora ::selection możemy sprawić, że wyróżniona przez użytkownika zawartość tekstowa interesującego nas elementu HTML na czas wspomnianego wyróżnienia zostanie umieszczona w dodatkowym pseudoelemencie.

Dodatkowe techniczne informacje o selektorze ::selection

ograniczenie - elementy HTML

Tylko element HTML, który w danym momencie może reprezentować zawartość tekstową, która to zawartość tekstowa może zostać wyróżniona przez użytkownika.

ograniczenie - właściwości CSS

Tylko następujące właściwości CSS: color, background-color, cursor, outline, text-decoration, text-emphasis-color, text-shadow.

Każda przeglądarka internetowa może posiadać swój własny dodatkowy zbiór właściwości CSS, które możemy wykorzystać wraz z selektorem "::selection".

Przykładowa reguła CSS, selektor ::selection

p::selection {
  color:red;
}

Wyjaśnienie przykładowej reguły CSS

      p::selection { color:red; }
    
p::selection

Spraw, aby wyróżniona przez użytkownika zawartość tekstowa jakiegokolwiek elementu p na czas wspomnianego wyróżnienia została umieszczona w dodatkowym pseudoelemencie oraz

color

była koloru

red

czerwonego

Kod źródłowy przykładowego dokumentu HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      p::selection {
        color:red;
      }

      /* Dla przeglądarki internetowej Firefox */
      p::-moz-selection {
        color:red;
      }
    </style>
  </head>

  <body>

    <div>
      na czas wyróżnienia (zaznaczenia) tekstu znajdującego się w zawartości tego elementu "div" wspomniany tekst nie zostanie umieszczony w dodatkowym pseudoelemencie oraz nie będzie koloru czerwonego, ponieważ ten element HTML nie jest elementem "p"
    </div>

    <p>
      na czas wyróżnienia (zaznaczenia) tekstu znajdującego się w zawartości tego elementu "p" wspomniany tekst zostanie umieszczony w dodatkowym pseudoelemencie oraz będzie koloru czerwonego, ponieważ ten element HTML jest elementem "p"
    </p>

    <div>
      na czas wyróżnienia (zaznaczenia) tekstu znajdującego się w zawartości tego elementu "div" wspomniany tekst nie zostanie umieszczony w dodatkowym pseudoelemencie oraz nie będzie koloru czerwonego, ponieważ ten element HTML nie jest elementem "p"
    </div>

  </body>
</html>

Rezultat

na czas wyróżnienia (zaznaczenia) tekstu znajdującego się w zawartości tego elementu "div" wspomniany tekst nie zostanie umieszczony w dodatkowym pseudoelemencie oraz nie będzie koloru czerwonego, ponieważ ten element HTML nie jest elementem "p"

na czas wyróżnienia (zaznaczenia) tekstu znajdującego się w zawartości tego elementu "p" wspomniany tekst zostanie umieszczony w dodatkowym pseudoelemencie oraz będzie koloru czerwonego, ponieważ ten element HTML jest elementem "p"

na czas wyróżnienia (zaznaczenia) tekstu znajdującego się w zawartości tego elementu "div" wspomniany tekst nie zostanie umieszczony w dodatkowym pseudoelemencie oraz nie będzie koloru czerwonego, ponieważ ten element HTML nie jest elementem "p"

Interpretacja selektora ::selection

Firefox

tak, lecz z przedrostkiem -moz-

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 9

Edge

tak

Zobacz więcej informacji o interpretacji selektora .