CSS drawing czyli pseudo-klasy i pseudo-elementy. Czy warto?

11/7/2018
Bartek Cis

Czy słyszałeś kiedyś o pseudo-klasach w CSS? Pewnie tak 🙂 Ale dlaczego by sobie tej wiedzy nie odświeżyć? A może jeszcze nie znasz tych właściwości CSS’a? W takim razie warto je poznać. Zdecydowanie… Zapraszam na wpis przybliżający nieco to zagadnienie!

Czego się dzisiaj dowiesz?

Opiszę czym są pseudo-klasy i pseudo-elementy w CSS. Ten wpis pomoże Ci w zrozumieniu całej koncepcji i przedstawi po co w ogóle ich używać. Na końcu trochę praktycznych przykładów i linki do przydatnych materiałów.

Dlaczego o tym piszę?

Co tu dużo gadać. Wiadomym jest, że prawdziwy “rasowy” Developer rzadko kaja swoje palce pisaniem jakiś CSS’ów. Jego abstrakcyjny umysł jest po prostu stworzony do większych rzeczy.

Można też traktować każde zadanie poważnie i nawet jeżeli w projekcie są elementy bardziej lub mniej interesujące to wykonywać je po kolei 🙂 Wszystko jest ważne i jeśli trzeba napisać te CSS’y (bo inaczej wszystko wygląda jak wygląda… ) to po prostu wykorzystać swój szeroki warsztat i stworzyć coś pięknego.

Ja dzisiaj piszę artykuł o pseudo-klasach bo jakoś zawsze chciałem to zrobić 🙂 Nie jest to wiedza szczególnie skomplikowana jednak dla zaczynających swoją przygodę z CSS często jest odkładana “na później”. Szkoda bo odpowiednio użyta daje nam spore możliwości.

Od czego zacząć?

Może od początku.

Co dają pseudo-klasy lub pseudo-elementy?

Tworzą nam dodatkowe “warstwy abstrakcji”. Po ludzku? Pozwalają na dostęp do dodatkowych elementów bez pisania kodu HTML i dodawania nowych klas CSS. Tworzy się w zasadzie zupełnie nowe kontenery na stronie.

Kolejną możliwością jest definiowanie zachowań elementów na stronie po interakcji z użytkownikiem tzn. po najechaniu myszką, po kliknięciu itp. Pozwala to na uniknięcie pisania niektórych skryptów w JS a wiadomo, że im mniej tym lepiej. Zaraz wszystko nieco się rozjaśni.

Do czego są dedykowane pseudo-klasy?

  1. Do obsługi linków czyli tagu <a>.
  2. Do obsługi tekstu czyli tagu <p>.
  3. Do obsługi formularzy czyli np. tagu <input>.
  4. Do zadań specjalnych 🙂

Teraz osobno rozpatrzę każdy przypadek i krok po kroku przejdziemy przez pseudo-klasy kończąc na pseudo-elementach.

Pseudo-klasa w CSS

Tworzy się ją w bardzo prosty sposób dodając synatx :pseudoclass po selektorze CSS. Wygląda to tak:

.dropdown:focus{
    position: absolute;
}

Powyżej dodajemy do selektora .dropdown pseudo-klasę :focus która dodaje właściwość position:absolute;

Pseudo-klasy są z góry zdefiniowane i odpowiadają za konkretną interakcję z użytkownika z aplikacją lub pliku .css z plikiem .html. Nie można (przynajmniej z założenia) dodawać własnych pseudo-klas.

Jak używać pseudo-klas?

Poniżej kilka praktycznych przykładów:

Pseudo-klasy i linki

Czyli jak wyróżnić/ zmodyfikować tagi <a></a> w naszej aplikacji, 3 proste przykłady poniżej:

See the Pen PaMbPg by Bart (@bedekodzic) on CodePen.

Hehe tak działają pseudo-klasy. Co my tam mamy?

a:visited – stylujemy wszystkie odwiedzone linki.

a:link – stylujemy wszystkie nie odwiedzone linki.

a:nth-child(1) – stylujemy pierwszy tag <a>. Tak można się dobrać do dowolnego tagu. Nie tylko linków.

No to już mamy przedsmak tego co nam dają pseudo-klasy. Co dalej?

Pseudo-klasy i tekst

Teraz kilka przykładów dla tekstu czyli tagi <p></p>.

See the Pen aKeBEG by Bart (@bedekodzic) on CodePen.

Jak widać na przykładzie powyżej można swobodnie wybierać poszczególne tagi <p> za pomocą pseudo-klas takich jak :first-of-type, :nth-last-of-type(2) (drugi licząc od końca) i dowolnie je stylować.

Jeśli ktoś daje paragrafom atrybut lang w zależności od wersji językowej to można ostylować te paragrafy za pomocą np. :lang(pl).

Pseudo-klasy i formularze

To jeszcze przebrnę przez formularze i potem będą ciekawsze rzeczy 🙂

Otóż pseudo-klasy mogą być całkiem przydatne w przypadku formularzy. Przeanalizujmy to na przykładzie tagu <input>. Sprawdźmy co ciekawsze klasy:

See the Pen ZRgLrm by Bart (@bedekodzic) on CodePen.

Generalnie można stylować inputy w zależności od tego jaki atrybut dany input ma przypisany w HTMLu. Wiele z tych atrybutów ma analogiczne pseudo-klasy więc dość łatwo się domyślić o co w tym wszystkim chodzi.

Ciekawą klasą jest :focus która pozwala stylować aktualnie aktywny element.

:hover

No i na koniec król wszystkich pseudo-klas 🙂

:hovera chyba nie muszę nikomu przedstawiać 🙂 W ten sposób stylujemy element na który najechało się kursorem. Przykłady będą w następnych sekcjach.

Pseudo-element w CSS

Kolejną kategorią są pseudo-elementy. Są one o tyle ciekawe, że używa się ich do tworzenia dodatkowych warstw abstrakcji bez potrzeby dodawania nowych tagów w HTML.

Ich syntax pierwotnie był nieco inny bo wyglądał tak: ::first-letter ale teraz można używać wersji :first-letter. Czyli nie różni się on niczym on składni pseudo-klas.

Poza wspomnianym powyżej elementem mamy jeszcze ::first-line i ::selection. Ale czy to tyle?

::before i ::after

Te dwa pseudo-elementy są w zasadzie tym do czego dążyłem przez cały ten wpis. Dlaczego? Bo dzięki nim CSS może stać się dość ciekawym narzędziem do… rysowania 🙂 Czyli CSS-drawing. Jak to działa?

Wystarczy stworzyć jeden element w HTML i stworzyć dla niego dwa pseudo-elementy :before i :after. W ten sposób mamy już 3 elementy stworzone z jednego… Teoretycznie jeden powinien być przed a drugi za elementem głównym ale ustawiając position:absolute i z-index możemy dowolnie modyfikować wzajemne położenie.

Przykład poniżej:

See the Pen GGVoyG by Bart (@bedekodzic) on CodePen.

No ale powyżej jest aż 7 elementów i jeden tag w HTML. Jak to?

I tu cały trik 🙂 Bo każdy z 3 elementów może mieć… box-shadow czyli własny cień a raczej cienie. Możemy je dodawać w nieskończoność i tworzyć kolejne elementy o odpowiednim przesunięciu i kolorze. Odrobina kreatywności pozwala na tworzenie całkiem fajnych rzeczy.

Należy pamiętać o tym, że pseudo-elementy są domyślnie przeznaczone dla tekstów więc trzeba ustawić właściwość content:””; lub coś wpisać (tekst) w ten cudzysłów.

No i po co mi to?

Wszystko o czym tu czytasz może być użyte do bardzo ciekawych i co najważniejsze wydajnych rozwiązań. Bo powiedz, czy nie uważasz, że ten button poniżej jest naprawdę fajny?

See the Pen Flat Layered Button by Dronca Raul (@rauldronca) on CodePen.

CSS-drawing

Można też tworzyć całe grafiki które często można użyć zamiast np. grafiki wektorowej. Przykład pięknych wąsów poniżej:

Albo Frankenstein:

Swoją drogą wiecie, że Frankenstein to niemiecka nazwa Ząbkowic Śląskich. Czyżby historia tamtejszego grabarza była inspiracją dla całej historii?

Co dalej?

Zanim zagłębisz się w Świat CSS’a warto przeczytać dokumentację o pseudo-elementach. A potem co? Potem ogień 🙂

See the Pen aKeJLm by Bart (@bedekodzic) on CodePen.

Koniec!

Podziel się z innymi 🙂

Piszę dla was tego bloga bo lubię aplikacje internetowe. Mogę je projektować, kodować a potem o nich pisać czując dreszczyk ekscytacji za każdym razem gdy trafię na coś nowego. Bo uczymy się całe życie. Prawda?

warto

partnerzy:

dane kontaktowe:

kontakt@bedekodzic.pl

Social media & sharing icons powered by UltimatelySocial

Podoba Ci się ten blog? Podziel się ze znajomymi!

  • Facebook
    Facebook
  • Twitter
    Visit Us