Pseudoklasy CSS a pseudoelementy: Głębokie zanurzenie

Leonard Strauss included in Programming Web Design Css

2023-09-27 1222 words 6 minutes

Contents

CSS obsługuje różne selektory do identyfikacji elementów do stylizacji, każdy z własnym zestawem reguł. Podczas gdy większość metod selekcji jest prosta, pseudoklasy i pseudoelementy zapewniają większą elastyczność. Pozwalają one wybierać elementy na podstawie ich stanu lub pozycji w strukturze, lub wybierają określone fragmenty treści.

Skuteczne wykorzystanie tych selektorów może stanowić wyzwanie, ponieważ istnieje możliwość pomylenia pseudoklas i pseudoelementów. Jak odróżnić te dwie różne kategorie selektorów?

Zrozumienie pseudoklas CSS

Pseudoklasa CSS reprezentuje modyfikator sytuacyjny, który można zastosować do selektora, umożliwiając stylizację elementów w określonych warunkach. Takie słowa kluczowe pozwalają na kierowanie elementów na podstawie zdarzeń, takich jak najechanie kursorem, interakcja kliknięcia lub wprowadzenie tekstu w polu wejściowym.

Pseudoklasy zwiększają interaktywność strony internetowej, modyfikując wygląd lub zachowanie elementów w odpowiedzi na interakcje użytkownika, gdy są używane wraz z innymi selektorami CSS, zapewniając wyrafinowaną kontrolę zarówno nad stylem, jak i interaktywnością.

Składnia i użycie pseudoklasy CSS

Składnia pseudoklasy CSS obejmuje dwukropek (:), po którym następuje oznaczenie pseudoklasy o następującej strukturze:

 selector:pseudo-class {
    /* styles */
}

W tej składni:

Termin “selektor” w CSS odnosi się do konkretnego elementu lub elementów dokumentu HTML, które mają otrzymać właściwości stylistyczne poprzez zastosowanie różnych pseudoklas. Selektory mogą przybierać dowolną liczbę form, w tym pojedyncze znaczniki HTML, klasy, identyfikatory, a nawet złożone selekcje składające się z wielu kryteriów. Podczas gdy selektory są zwykle wykorzystywane w zestawach reguł CSS, ich brak spowodowałby, że pseudoklasa zastosowałaby swoje reguły stylu uniwersalnie do kwalifikujących się elementów.

Pseudoklasa, w tym kontekście, odnosi się do słowa kluczowego, które oznacza konkretny warunek lub stan, na którym chcemy się skupić i którym chcemy się zająć.

Pseudoklasy w CSS można ogólnie podzielić na różne kategorie w zależności od ich funkcji i kryteriów, które spełniają, które obejmują:1. Klasa (ogólna): Te klasy pseudoklas mają zastosowanie do wszystkich elementów w ramach określonej kategorii lub typu. Przykłady obejmują hover, focus i active.2. Podklasa: Pseudoklasy, które są specyficzne dla określonych podkategorii elementu. Na przykład visited jest tylko dla linków.3. Descendant: Pseudoklasy, które wybierają elementy posiadające elementy potomne o określonych właściwościach. Przykładem może być :first-child.4.Dziecko: Wybiera elementy, które są dziećmi innego elementu. Przykład: :last-child.5. Sibling: Wybiera pomiędzy dwoma lub więcej elementami rodzeństwa na podstawie ich pozycji względem siebie

Interakcja z użytkownikiem

:hover

Skrypt wybiera określony element, gdy kursor przesunie się nad nim, wykorzystując wbudowane zdarzenie hover w JavaScript.

:active

Gdy użytkownik wchodzi w interakcję z elementem interfejsu, na przykład klikając go, system wybierze ten konkretny element. Ten proces wyboru pozwala na dalszą interakcję i manipulowanie wybranym elementem w programie lub aplikacji.

:visited

Wybiera łącza, które odwiedził użytkownik.

Structural

:first-child

Iteruje przez każdy bezpośredni element podrzędny określonego węzła nadrzędnego, zwracając pierwszy napotkany element w sekwencji.

:last-child

Zwraca ostatni element potomny w danym węźle nadrzędnym.

:nth-child(n)

Wybiera elementy na podstawie ich hierarchicznego umiejscowienia w jednostce nadrzędnej, umożliwiając celowanie w określone elementy potomne.

Form-Related

:disabled

Wybiera wyłączone elementy formularza.

:checked

Wybiera zaznaczone przyciski radiowe lub pola wyboru.

UI Element State

:invalid

Wybiera nieprawidłowe elementy formularza.

:required

Wybiera wymagane pola elementów formularza.

:optional

Wybiera elementy formularza, które są polami opcjonalnymi.

Link-Related

:link

Wybiera nieodwiedzone linki.

Language-Based

:lang()

Wybiera elementy używając informacji językowych dostarczonych przez ich atrybut “lang”.

Można eksperymentować z zastosowaniem efektów najechania kursorem na obrazy w galerii, gdzie typowe wybory stylistyczne obejmują powiększanie lub przyciemnianie wizualizacji po interakcji użytkownika poprzez najechanie kursorem.

Odkrywanie pseudoelementów CSS

Wykorzystanie pseudoelementów CSS zapewnia możliwość stosowania wyspecjalizowanych słów kluczowych w połączeniu z selektorami, umożliwiając stylizację poszczególnych aspektów zawartości elementu lub dodawanie materiałów uzupełniających. Takie słowa kluczowe ułatwiają kierowanie i dostosowywanie elementów zgodnie z ich składem strukturalnym.

Elementy Pseuod oferują potężne środki poprawy wyglądu i układu stron internetowych, naśladując funkcjonalność tradycyjnych elementów HTML za pomocą technik stylizacji. Wykorzystując te elementy, projektanci mogą tworzyć atrakcyjne wizualnie projekty, zachowując jednocześnie integralność semantyczną.

Składnia i implementacja pseudoelementów CSS

Pseudoklasy w CSS wykorzystują określoną strukturę gramatyczną, która pociąga za sobą użycie dwóch dwukropków (:::), po których następuje nomenklatura pseudoklasy. Podstawowe wyrażenie można przedstawić w następujący sposób:

 selector::pseudo-element {
    /* styles */
}

W tej składni:

Pseudoklasa ::before lub ::after jest stosowana do konkretnego elementu określonego przez selektor podany w jej obrębie. Selektor może reprezentować dowolną prawidłową regułę CSS i może również nie zawierać żadnego selektora.

Pseudoelement, znany również jako ::pseudoelement lub ::pseudo, jest regułą CSS, która jest ukierunkowana na określoną część struktury elementu HTML bez wpływu na jego układ lub zawartość. Pozwala to programistom na tworzenie efektów wizualnych i dostosowywanie interfejsów użytkownika poprzez manipulowanie elementami w kreatywny sposób. Pseudoelementy są zwykle używane samodzielnie w selektorach, ponieważ ich celem jest modyfikacja wyglądu pojedynczego elementu, a nie wielu.

Oto niektóre z pseudoelementów:

::before

Wstawienie podanego tekstu w określonym miejscu w zawartości wskazanego elementu HTML, przed jego istniejącą zawartością.

-|-

::after

Operacja polega na wstawieniu nowego materiału bezpośrednio po istniejącym tekście w określonym elemencie HTML, zazwyczaj oznaczonym nazwą znacznika lub wartością atrybutu ID. Proces ten jest powszechnie stosowany do dodawania dodatkowych treści, takich jak obrazy, filmy lub informacje uzupełniające do istniejącej strony internetowej bez konieczności bezpośredniej modyfikacji oryginalnego kodu źródłowego.

::first-letter

Ozdabia początkowy znak tekstu zawartego w danym elemencie za pomocą ulepszeń stylistycznych.

::selection

Nadaje atrakcyjny wygląd fragmentowi tekstu wybranemu przez kursor użytkownika.

::marker

Modyfikuje wizualną prezentację pojedynczego elementu na liście, na przykład dostosowując wygląd punktora lub wskaźnika numerycznego powiązanego z tym elementem.

::cue

Wykorzystuje konfiguracje stylistyczne wskazówek w komponentach multimedialnych, takich jak i , zwykle stosowane w kontekstach napisów i napisów.

Wykorzystanie pseudoelementów ::before i ::after może stanowić wyzwanie w zrozumieniu, dlatego znajomość tych pojęć jest niezbędna do biegłego posługiwania się innymi aspektami CSS.

Podobieństwa i różnice

Pseudoklasy i pseudoelementy w kaskadowych arkuszach stylów (CSS) mają pewne podobieństwa, a jednocześnie wykazują znaczące różnice.

Pseudoklasy

Pseudoelementy

-|-|-

Składnia

Poprzedzone pojedynczym dwukropkiem (:).

Poprzedzone dwoma dwukropkami (::).

Użycie

Wybierz i sformatuj komponenty zgodnie z ich bieżącym stanem, lokalizacją lub interakcjami użytkownika.

Wykorzystywanie stylistycznych aspektów zawartości elementu lub generowanie wirtualnych komponentów w celu poprawy prezentacji wizualnej i doświadczenia użytkownika.

Selektory

Złożone lub złożone selektory mogą zawierać listę komponentów oddzielonych przecinkami, a wewnętrzna wartość zmiennoprzecinkowa może być wstawiona w dowolnym miejscu na tej liście.

Podane stwierdzenie jest następujące w elegancki sposób:Ostatni element selektora, musi służyć jako jego ostateczny składnik, pojawiając się tylko raz.

Wstawianie treści

Podstawową funkcją tego elementu jest stylizowanie tekstu na podstawie jego bieżącego stanu lub kontekstu, a nie wstawianie jakiejkolwiek rzeczywistej treści.

Masz możliwość włączenia dodatkowego materiału do zawartości określonego elementu lub dołączenia go do niego.

Stylizacja typograficzna

Nie jest zwykle używana do stylizacji typograficznej.

Używany do przekazywania niuansów tekstowych i typograficznych, takich jak style ::first-line i ::first-letter.

Celowane części

Celuje w całe elementy.

Kieruje na określone części zawartości elementu.

Obsługa przeglądarek

Ogólnie dobrze obsługiwana.

Zgodność tej witryny z przeglądarkami jest ogólnie dobra, chociaż niektóre przestarzałe przeglądarki mogą mieć ograniczoną funkcjonalność.

Pseudoklasy i pseudoelementy odgrywają kluczową rolę w nadawaniu stronom internetowym różnorodnych właściwości stylistycznych i interaktywnych funkcji za pośrednictwem CSS. Mimo pewnych podobieństw, wykazują one różne funkcje w odniesieniu do projektowania i tworzenia stron internetowych.

Pseudoklasy i pseudoelementy w akcji

Możesz lepiej zrozumieć pseudoklasy i elementy CSS, stosując je w różnych kreatywnych przedsięwzięciach. Niektóre proste zadania, które można podjąć, obejmują projektowanie kart profilowych, tworzenie menu nawigacyjnych i udoskonalanie stylów list, wśród innych możliwości. Takie działania zapewniają praktyczne doświadczenie, które pozwala na bardziej biegłe wykonywanie swoich umiejętności CSS, jednocześnie nadając dynamizm i atrakcyjność wizualną swoim cyfrowym produkcjom.