Pseudoklasy – o co chodzi❓
W HTML-u elementy, w zależności od działań użytkownika, z pomocą CSS, mogą zmienić swój wygląd. Służą do tego tzw. pseudoklasy CSS Pseudoklasa pozwala ustawić wygląd elementu, zależnie od tego w jakim stanie się znajduję lub jaką akcję na nim wykonano. Poniżej przedstawiam konstrukcję reguły z pseudoklasą:Przykład reguły zastosowania pseudoklasy (po najechaniu na nie kursorem zmienia kolor linków na zielony):Przeanalizuj poniższy przykład zastosowania pseudoklasy CSS. Spokojnie – w poniższych punktach postaram się wyjaśnić jak one działają:
quiet-shadow-z52vc
quiet-shadow-z52vc by danielminschinski
Pseudoklasa hover
Hover jest stanem elementu, który następuję po najechaniu na niego kursorem. Dla takiego stanu możemy przypisać danemu elementowi zupełnie inne właściwości wyglądu.
W stanie hover stylujemy tzw. pseudoklasy :hover
W powyższym przykładzie, który zapewne prześledziłeś, zauważyłeś jak ustawiliśmy dla linków oraz przycisków pseudoklasę hover. Dodatkowo nie tworzę osobnego przykładu, ponieważ nie będę dublować wyjaśnień😉
Pseudoklasa active
Stan active następuje w momencie, w którym przytrzymujemy na danym elemencie HTML lewy przycisk myszki. Główne jego zastosowanie możemy zauważyć przy tworzeniu przycisków, aby zasygnalizować, że zareagował on na kliknięcie.
Tak jak przy hover, stylujemy za pomocą pseudoklasy :active
W naszym przykładzie powyższy stan zastosowałem na jedynym przycisku który znajduję się na stronie. W czasie kliknięcia zmienia swój kolor na zielony.
Pseudoklasa focus
Stan focus jest często wykorzystywany w przypadku formularzy, a zwłaszcza przy bardziej rozbudowanych, gdzie za jego pomocą rozróżniamy aktywne pole od pozostałych. Takim sposobem użytkownik widzi które pole aktualnie wypełnia.
Przykładowy selektor:
W naszym przykładzie uwzględniłem formularz. Dodałem w nim pseudoklase fokus do inputa oraz textarea. Sprawdź jeszcze raz jak zastosowałem powyższe rozwiązanie.
Podstawowe pseudoklasy za Nami😊 Do naszych stron potrafimy dodawać ciekawe metody na ożywienie elementów. Dzięki naszym ruchom, strona zaczyna “odbierać” nasze interakcję.
W kolejnym poście przedstawię Wam właściwość overflow. Po części spotkaliście się z tym słowem na moim blogu. Tym razem więcej szczegółów zaprezentuję na przykładzie😊
Do kolejnego postu❗ Zapraszam na mojego fanpage. Ale przed zamknięciem zapisz się do newslettera, który dodaję poniżej. Naprawdę warto być na bieżąco😁: