Autor publikacji
Virtual Patriot - Administrator

:active

Data publikacji
Ostatnio edytowano

Przeznaczenie selektora :active

      :active { ... }
    

Selektor :active odwołuje się do każdego elementu HTML, którego cechy w danym momencie spełniają zasadę pseudoklasy :active.

Cechy elementu HTML spełniają zasadę pseudoklasy :active od momentu przytrzymania przez nas lewego przycisku myszy nad obszarem interesującego nas elementu HTML lub nad treścią znajdującą się w zawartości interesującego nas elementu HTML, aż do momentu gdy wspomniany przycisk zostanie przez nas puszczony.

Informacje techniczne o selektorze :active

ograniczenie - elementy HTML

brak

ograniczenie - właściwości CSS

brak

Przykładowa reguła CSS, selektor :active

p:active {
  color:red;
}

Wyjaśnienie przykładowej reguły CSS

      p:active { color:red; }
    
p:active

do każdego elementu p, którego cechy w danym momencie spełniają zasadę pseudoklasy :active

color

dodaj właściwość CSS, która zmieni kolor tekstu elementu HTML

red

na barwę czerwoną

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

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

    <style>
      p {
        border:3px solid black;
      }

      p:active {
        color:red;
      }
    </style>
  </head>

  <body>

    <p>
      od momentu gdy przytrzymasz nad obszarem tego elementu "p" lewy przycisk myszy, do momentu gdy wspomniany przycisk zostanie przez Ciebie puszczony, tekst znajdujący się w zawartości tego elementu "p" będzie posiadał kolor czerwony
    </p>

    <p>
      od momentu gdy przytrzymasz nad obszarem tego elementu "p" lewy przycisk myszy, do momentu gdy wspomniany przycisk zostanie przez Ciebie puszczony, tekst znajdujący się w zawartości tego elementu "p" będzie posiadał kolor czerwony
    </p>

    <p>
      od momentu gdy przytrzymasz nad obszarem tego elementu "p" lewy przycisk myszy, do momentu gdy wspomniany przycisk zostanie przez Ciebie puszczony, tekst znajdujący się w zawartości tego elementu "p" będzie posiadał kolor czerwony
    </p>

  </body>
</html>

Rezultat

od momentu gdy przytrzymasz nad obszarem tego elementu "p" lewy przycisk myszy, do momentu gdy wspomniany przycisk zostanie przez Ciebie puszczony, tekst znajdujący się w zawartości tego elementu "p" będzie posiadał kolor czerwony

od momentu gdy przytrzymasz nad obszarem tego elementu "p" lewy przycisk myszy, do momentu gdy wspomniany przycisk zostanie przez Ciebie puszczony, tekst znajdujący się w zawartości tego elementu "p" będzie posiadał kolor czerwony

od momentu gdy przytrzymasz nad obszarem tego elementu "p" lewy przycisk myszy, do momentu gdy wspomniany przycisk zostanie przez Ciebie puszczony, tekst znajdujący się w zawartości tego elementu "p" będzie posiadał kolor czerwony

Interpretacja selektora :active

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak