Pseudoelementy i pseudoklasy w CSS

Opublikowany: 2020-08-20

Za każdym razem, gdy musimy zmodyfikować styl CSS w naszej sieci, Toni i ja gramy w papier-kamień-nożyce, aby zobaczyć, kto jest „szczęściarzem”, który wykona zadanie. Jak to możliwe, możesz zapytać? Cóż, przez długi czas praca z HTML i CSS była uciążliwa, ponieważ naprawienie czegoś na jednym końcu zepsuło wiele rzeczy gdzie indziej.

Komiksowy gif pokazujący, jak skomplikowany jest CSS
Nie sposób nie podziwiać i zachwycać się pracą wykonaną przez programistów front-end.

Ale prawda jest taka, że ​​CSS bardzo się zmienił w ostatnich latach i jeśli skorzystasz z jego nowych funkcjonalności, znacznie łatwiej jest odpowiednio i efektywnie zaprojektować i stylizować swoją stronę. Moim zdaniem, dwa wielkie postępy w CSS, które ostatnio widzieliśmy, to włączenie, po pierwsze, flex (do układu wierszy i kolumn), a nieco później, grid (do układu siatek).

CSS jest pełen funkcji, które mogą uprościć Twoją pracę . A dzisiaj zobaczymy dwa z nich: pseudoelementy i pseudoselektory.

Jak „tworzyć zawartość” za pomocą pseudoelementów CSS

Pseudoelementy CSS to mechanizm dostępu do części HTML, które nie mają skojarzonego węzła w DOM . Na przykład „część naszego dokumentu” może być „pierwszą linią akapitu”, „pierwszą literą akapitu” lub „wyborem dokonanym przez użytkownika”, z których żaden nie ma powiązanego węzła. Ale pseudoelementy to także sposób na tworzenie treści przed lub po istniejącym elemencie za pomocą CSS.

Pseudoelementy dostępne w CSS3 to:

  • ::before : dodaje zawartość przed elementem
  • ::afte po r: dodaje zawartość po elemencie
  • ::first-letter : wybiera pierwszą literę elementu „block” (to znaczy tych, których właściwość display jest ustawiona na block , inline-block , table-cell , itp.)
  • ::first-line : wybiera pierwszy wiersz elementu „blokowego”
  • ::selection : odnosi się do części dokumentu, które wybrał odwiedzający

Jak widać, pseudoelementy charakteryzują się tym, że zaczynają się od pary dwukropków ( :: ). I tak ich używasz.

Wybieranie części dokumentu

Załóżmy na przykład, że chcemy, aby w pewnym akapicie pierwsza linia była pomarańczowa i podkreślona. Cóż, po prostu zrób coś takiego:

 p::first-line { color: orange; text-decoration: underline; }

a otrzymasz poprawny wynik:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis leo in turpis interdum, w pharetra velit mocm. Nam eget lacus sed lacus dictum scelerisque. Proin porta ligula sed mi semper, vel interdum massa auctor. Pellentesque et massa congue, tincidunt erat ac, tincidunt elit. Sed ac dolor metus. Nam commodo metus sed ligula consectetur interdum. Curabitur odio est, tempor id egestas nec, aliquam at nisl.

Jeśli z drugiej strony chcesz zmodyfikować wybór, podejście jest dokładnie takie samo. Pamiętaj tylko, że liczba właściwości CSS, które możemy dostosować, ogranicza się do color , background , cursor i outline :

 p::selection { background: #21acde; color: white; }

Możesz zobaczyć wynik w następnym akapicie, zakładając, że coś wybierzesz:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis leo in turpis interdum, w pharetra velit mocm. Nam eget lacus sed lacus dictum scelerisque. Proin porta ligula sed mi semper, vel interdum massa auctor. Pellentesque et massa congue, tincidunt erat ac, tincidunt elit. Sed ac dolor metus. Nam commodo metus sed ligula consectetur interdum. Curabitur odio est, tempor id egestas nec, aliquam at nisl.

Tworzenie nowej zawartości

Masz również możliwość dynamicznego dodawania treści do swojej strony. Na przykład wyobraź sobie, że masz listę przedmiotów takich jak ta:

 <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul>

Zazwyczaj tak wyglądają listy:

  • Jeden
  • Dwa
  • Trzy

ale możesz go dostosować tak, aby każdy element był oddzielony od następnego za pomocą niebieskiego paska:

  • Jeden
  • Dwa
  • Trzy

używając pseudoelementu ::after na każdym elemencie listy w następujący sposób:

 ul li { display: inline; } ul li::after { color: #21acde; content: " | "; display: inline-block; }

Z pseudoelementami ::before i ::after możesz zrobić wiele wspaniałych rzeczy . Na przykład możesz połączyć wiele teł w jednym elemencie, wyświetlić adresy URL łączy podczas drukowania strony, uporządkować elementy pływające, bloki etykiet, upiększyć typografię i tak dalej.

Jak stosować style bardziej precyzyjnie przy użyciu pseudoklas?

Pseudoklasy CSS pozwalają nam wybrać elementy naszej witryny, które albo są w określonym stanie , albo mają jakąś specjalną właściwość , która je wyróżnia. Najczęstszym (i najstarszym) przykładem są prawdopodobnie pseudoklasy linków:

  • a:link to te linki, których jeszcze nie odwiedziłeś
  • a:visited to dowolny link, który już odwiedziłeś
  • a:hover jest linkiem, na który się najeżdżasz
  • a:focus odpowiada linkowi, na którym aktualnie się koncentruje (co jest podobne do najechania kursorem, ale przy użyciu klawiatury zamiast myszy)
  • a:active pasuje do linku, w który aktualnie klikasz

W CSS istnieje około 60 pseudoklas. Zdecydowana większość z nich pozwala na filtrowanie elementów na podstawie ich stanu (na przykład możesz wybrać elementy tylko do odczytu za pomocą, jak zgadłeś, pseudoklasy :read-only ). Ale jest kilka interesujących „wyjątków” od tej reguły, o których warto wspomnieć.

Ale zanim to zrobimy, tylko krótka uwaga: zauważ, jak odróżnić pseudoklasę od pseudoelementu, ponieważ pierwsza zaczyna się od jednego dwukropka ( : ), podczas gdy druga zaczyna się od dwóch ( :: ).

Wybieranie dzieci elementu przy użyciu pseudoklas „potomnych” i „typu”

Pamiętasz przykład, który widzieliśmy wcześniej, w którym dodaliśmy pionową kreskę, aby oddzielić elementy listy? Cóż, jeśli przyjrzysz się uważnie, zobaczysz, że ustawiona przez nas reguła nie do końca działa:

  • Jeden
  • Dwa
  • Trzy

ponieważ ostatni element zawiera również pionową kreskę, chociaż nie powinna. Jeśli chcemy go usunąć, możemy zrobić coś takiego:

 ul li { display: inline; } ul li::after { color: #21acde; content: " | "; display: inline-block; } ul li:last-child::after { display: none; }

co działa dokładnie tak, jak sobie wyobrażasz:

  • Jeden
  • Dwa
  • Trzy

Jak widać, wszystko, co robimy, to dodawanie nowej reguły za pomocą pseudo-klasy :last-child , która pozwala nam wybrać ostatni element li z naszej listy ul , a gdy już go mamy, ukryć jego pseudoelement ::after z właściwością display ustawioną na none .

Specjalne cechy * -child i * -of-type

Istnieją trzy odmiany pseudoklasy *-child :

  • :first-child dopasowuje pierwsze dziecko elementu (duh!)
  • :last-child robi to samo, ale z tym drugim
  • :nth-child(i) , zgadłeś, wybiera i- ty element (na przykład :nth-child(2) pasuje do drugiego dziecka)

Spójrzmy więc i pomyślmy o następującym CSS:

 li strong:first-child { color: orange; text-decoration: underline; }

oraz następujący fragment kodu HTML:

 <ol> <li>Lorem <strong>ipsum</strong> dolor <strong>sit</strong> amet.</li> <li><em>Lorem</em> <strong>ipsum</strong> dolor <strong>sit</strong> amet.</li> <li>Lorem <strong>ipsum</strong> dolor <em><strong>sit</strong></em> amet.</li> </ol>

Jak myślisz, co się stanie? W zasadzie wydaje się, że we wszystkich trzech przypadkach słowo ipsum będzie pomarańczowe i podkreślone, ponieważ ipsum jest pierwszym strong dzieckiem w każdym elemencie li , prawda? Zobaczmy:

  1. Lorem ipsum dolor sit amet.
  2. Lorem ipsum dolor sit amet.
  3. Lorem ipsum dolor sit amet.

Cóż, wystarczająco blisko. Czy możesz zgadnąć, dlaczego tak się stało?

Pseudoklasa :first-child dotyczy pierwszego dziecka elementu. W pierwszym zdaniu ipsum jest pierwszym strong tagiem, który jest pierwszym dzieckiem. W drugim zdaniu pierwszym węzłem potomnym jest em (ze słowem Lorem ), a następnie pojawia się strong tag ze słowem ipsum . Dlatego ten silny tag nie jest „pierwszym dzieckiem”. Wreszcie w trzecim zdaniu znajdują się dwa tagi, które pasują do naszej reguły: ipsum (to jak pierwsze zdanie) i sit . Zauważ, że sit jest strong znacznikiem, który jest pierwszym dzieckiem swojego znacznika nadrzędnego ( em ).

A co jeśli chcielibyśmy podkreślić pierwszy strong tag każdego elementu li ? Cóż, musimy użyć innej pseudoklasy i upewnić się, że dopasowujemy tylko elementy, które są bezpośrednimi dziećmi li :

 li > strong:first-of-type { color: orange; text-decoration: underline; }

który działa zgodnie z oczekiwaniami:

  1. Lorem ipsum dolor sit amet.
  2. Lorem ipsum dolor sit amet.
  3. Lorem ipsum dolor sit amet.

Całkiem niesamowite, co? Znowu istnieją trzy odmiany tej pseudoklasy:

  • x:first-of-type pasuje do pierwszego rodzeństwa, którego typem jest x
  • x:last-of-type wybiera ostatni
  • x:nth-of-type(i) pasuje do i- tego rodzeństwa, którego typem jest x

Wybór przeciwnego za pomocą :not

Wreszcie, pseudoklasa, o której chciałem dzisiaj z tobą porozmawiać, to :not . :not jest pseudoklasą, która dopasowuje te elementy, które nie spełniają określonej właściwości. Wróćmy na przykład do naszego poprzedniego przykładu:

  • Jeden
  • Dwa
  • Trzy

Aby rozwiązać problem słupka, który pojawia się w ostatnim elemencie, w zasadzie (1) dodaliśmy słupek do wszystkich elementów li oraz (2) nadpisaliśmy regułę w ostatnim elemencie i ukryliśmy ją:

 ul li { display: inline; } ul li::after { color: #21acde; content: " | "; display: inline-block; } ul li:last-child::after { display: none; }

Ale to nie wydaje się zbyt optymalne, prawda? Przesadzamy z pierwszym zestawem, a następnie musimy poprawić nasze style w ostatnim elemencie. To, czego naprawdę chcieliśmy, to dodać pasek do wszystkich elementów z wyjątkiem ostatniego…

Cóż, możemy to osiągnąć, stosując pseudo-klasę :not i łącząc ją z :last-child :

 ul li { display: inline; } ul li:not(:last-child)::after { color: #21acde; content: " | "; display: inline-block; }

która stosuje styl do wszystkich elementów li , które nie są ostatnim elementem ( :not(:last-child) ), co doskonale opisuje nasz cel i tym samym rozwiązuje nasz problem:

  • Jeden
  • Dwa
  • Trzy

W podsumowaniu

Pseudoelementy i pseudoklasy CSS pozwalają nam być bardzo precyzyjnym podczas uzyskiwania dostępu do różnych elementów naszej witryny. Dzięki nim możemy pisać bardziej zwięzłe i szczegółowe reguły CSS, co upraszcza ich utrzymanie i pozwala uniknąć konieczności ciągłego nadpisywania ogólnych reguł dla konkretnych przypadków.

Mam nadzieję, że spodobał Ci się ten post, a jeśli tak, podziel się nim ze znajomymi!

Polecane zdjęcie JFL na Unsplash.