Autor publikacji: Virtual Patriot - Administrator

::selection

Data publikacji: Marzec 30 2012
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - the ::selection pseudo-element (LV4)

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.

Informacje techniczne 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;
      }
    </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"

Interpretacja selektora `::selection`

: tak
: tak
: tak
: tak
: tak, lecz od wersji 9
: tak

Zobacz więcej informacji o interpretacji selektora ::selection.