Ostatnio edytowany:

:active

Autor: Virtual Patriot

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, aż do momentu gdy wspomniany przycisk zostanie przez nas puszczony.

Dodatkowe techniczne informacje 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