Pseudoklasy w CSS | Wyjaśnione

Stylowanie elementów HTML na podstawie stanu, w którym się znajdują, może być interesującym zadaniem, które może poprawić ogólny wygląd i wrażenia użytkownika witryny. CSS zapewnia pewne klasy dla tego zadania, które są określane jako pseudoklasy. Ten post został zaprojektowany tak, aby rzucał światło na pseudokasy i ich użycie. Zanim przejdziemy do naszego głównego tematu, przyjrzyj się treści, przez którą przejdziesz w tym poście.

1. Co to są pseudoklasy
2. : klasa linków
3. : odwiedzona klasa
4. : klasa najemnika
5. : Klasa aktywna
6. : klasa fokusowa
7. : klasa pierwszego dziecka
8. : klasa Lang

Zacznijmy.

Co to są pseudoklasy

Klasy pseudoklasy w CSS opisują unikalny stan elementu HTML i na podstawie tych stanów efekty specjalne można dodać do elementów za pomocą selektora CSS wraz z tymi klasami.

Składnia

Selektor: Pseudoklasa

wartość nieruchomości;

Istnieją różne pseudoklasy w CSS, jednak omówimy kilka ważnych w tym pismach.

: klasa linków

Ta klasa służy do stylizowania linku, który nie został jeszcze odwiedzany.

Przykład

Załóżmy, że chcesz dodać link do swojej witryny i nadać mu określony styl, gdy nie jest jeszcze odwiedzany przez użytkownika. Postępuj zgodnie z poniższym kodem.

Wskazówka Linux

W powyższym kodzie podaliśmy link do atrybutu HREF znacznika kotwicy, a za pomocą klasy: link dajemy mu zielony kolor, gdy jest on w stanie niewidocznym.

Wyjście

Link został pomyślnie stylizowany za pomocą klasy: Link.

: odwiedzona klasa

Ta klasa służy do stylizowania linku, który odwiedził użytkownik.

Przykład

Poniższy przykład pokazuje działanie klasy: odwiedzona klasa postępuj zgodnie z przykładem.

Wskazówka Linux

Tutaj przypisujemy kolor zielony do odwiedzonego stanu linku. Oznacza to, że po otwarciu linku kolor zmieni się na zielony.

Wyjście

Przed odwiedzeniem linku.

Kiedy odwiedzasz link.

Odwiedzony stan linku został stylizowany za pomocą klasy:.

: klasa najemnika

Ta klasa służy do stylizowania elementu, gdy przyniesiony jest kursor myszy.

Przykład

Załóżmy, że chcesz podkreślić element za każdym razem, gdy użytkownik przenosi mysz na ten konkretny element.

Przynieś mi myszkę

W powyższym kodzie stworzyliśmy

element i użył klasy: Hover, aby nadać mu żółty kolor. Teraz za każdym razem, gdy przynosisz mysz na element, kolor zmienia się na żółty.

Wyjście

Klasa: Hover działa poprawnie.

: Klasa aktywna

Ta klasa służy do stylizowania elementu, gdy jest aktywny.

Przykład

Załóżmy, że chcesz, aby link zmienił jego kolor po kliknięciu.

Wskazówka Linux

Teraz, gdy użytkownik kliknie link, w tym momencie kolor linku zmieni się na różowy.

Wyjście

Przed kliknięciem linku.

Po kliknięciu linku.

Aktywny stan linku został pomyślnie stylizowany.

: klasa fokusowa

Ta klasa służy do stylizowania elementu, gdy jest on pod uwagę.

Przykład

Stylujmy pole wejściowe, zmieniając jego kolor tła, gdy użytkownik skupi się na nim, klikając.

Wpisz swoje imię:

Zgodnie z powyższym kodem, gdy użytkownik kliknie pole wejściowe, jego kolor tła zmieni się na różowy.

Wyjście

Kolor tła pola wejściowego zmienił się pomyślnie.

: klasa pierwszego dziecka

Ta klasa służy do stylizacji pierwszego dziecka określonego elementu.

Przykład

Załóżmy, że chcesz zastosować nieruchomość CSS tylko do pierwszego dziecka elementu DIV. Użyj następującego kodu.

Ten akapit jest pierwszym dzieckiem Div

Ten akapit jest drugim dzieckiem Div

W powyższym kodzie używamy klasy: pierwszego dziecka do wyrównania tekstu

element, który jest pierwszym dzieckiem elementu.

Wyjście

Pierwszy

Element został wyrównany w prawo za pomocą klasy: pierwszego dziecka.

: klasa Lang

Ta klasa służy do określenia języka, który ma być używany w danym elemencie. Ta klasa przydaje się przy określaniu reguł dla wielu języków w dokumencie.

Przykład

W poniższym przykładzie określamy niektóre reguły dla

element z atrybutem lang = „en”. Ten zestaw zasad zostanie zastosowany do każdego

Element posiadający ten atrybut.

To pierwszy akapit.

To jest drugi akapit.

To jest trzeci akapit.

Wyjście

Jak widać, pierwszy i trzeci

Elementy mają atribute lang = „en” Dlatego reguły zdefiniowane dla tej klasy będą miały zastosowanie tylko do pierwszego i trzeciego

elementy.

Wniosek

Pseudoklasy opisują unikalny stan elementu HTML i na podstawie tych stanów efekty specjalne można dodać do elementów. Istnieje wiele pseudoklasów w CSS, jednak niektóre z znaczących to: klasa linku ,: odwiedzona klasa,: klasa zawieszona,: aktywna klasa,: klasa fokusa,: klasa pierwszego dziecka i: ​​lang klasa. Klasy te są szczegółowo wyjaśnione w tym poście wraz z ich odpowiednimi przykładami.