P S E U D O K L A S Y I P S E U D O E L E M E N T Y KURS CSS3 Kamil Homernik E C A D E M Y. P L
Materiał stanowi własność portalu ecademy.pl. Treść jest przeznaczona wyłącznie dla kursantów i nie może być rozpowszechniana bez zgody właściciela serwisu.
Do czego służą pseudoelementy i pseudoklasy? Zarówno pseudoklasy jak i pseudoelementy służą do stylizacji konkretnych fragmentów naszej strony. Możemy określić wygląd m.in ostatniej linijki tekstu, czy pierwszej litery akapitu. Pozwalają nam też na dodanie treści występującej po lub przed danym elementem. Później poznamy lepiej ich przeznaczenie na konkretnych przykładach. Wszystkie pseudoklasy i pseudoelementy są częścią języka CSS. Pod adresem https://codepen.io/pen/ możemy sprawdzać działanie naszego kodu. Pseudoklasy Służą do stylizacji elementu mającego dany stan (np. hover - po najechaniu kursorem, albo required - pole wymagane) Chcąc dodać pseudoklasę do selektora z pliku HTML używamy dwukropka (:) i nazwy paseudoklasy.
Możemy je też dodawać do stworzonych przez nas klas w pliku HTML. Powyższy przykład nadaje niebieski kolor elementowi z klasą element, który występuje jako pierwszy. Jest on pierwszym elementem podrzędnym (tzw. dzieckiem z ang. child) elementu nadrzędnego (tzw. rodzica z ang. parent). Stąd nazwa first child
Znamy już składnie, poznajmy teraz inne popularne pseudoklasy. :first-child i :first-of-type określają pierwszy element (dziecko) elementu nadrzędnego (rodzica) :last-child i :last-of-type określa ostatni element elementu nadrzędnego :required określa obowiązkowe pola typu <input> :not() jest to negacja i potrzebuje argumentu podanego w nawiasie. W przykładzie poniżej, niebieską ramkę otrzymają elementy input, które NIE są polem do wpisania adresu email.
:nth-of-type() to bardzo ciekawa, o ile nie najciekawsza i najbardziej przydatna pseudoklasa. Już tłumaczę jej możliwości. W podstawowej wersji możemy wpisać, który element (dziecko rodzica) ma mieć dopisany styl. Drugi element listy będzie miał kolor czerwony.
Zobaczmy trochę bardziej zaawansowany przykład. W argumencie tej klasy możemy oznaczy wszystkie parzyste lub nieparzyste elementy. (odd) określa nieparzyste, a (even) parzyste. Sprawdźmy to na przykładzie. Tylko pierwszy i trzeci element będą miały kolor czerwony.
To nie koniec możliwości tej pseudoklasy. Jako argument możemy wpisać krótkie równanie w formie (a*n+b), gdzie a i b to liczby które dobieramy sami, a n to liczniki, który zaczyna liczyć od 0. Wyniki tego równania (x) to elementy, którym będzie przydzielony dany styl. Równanie prezentuje się w ten sposób: a*0+b=x1 a*1+b=x2 a*2+b=x3 Powiedzmy, że chcemy oznaczyć co trzeci element, zaczynając od pierwszego. Jak to uzyskamy? Nasze x1, x2, x3 i x4 mają wynosić odpowiednio 1, 4, 7 i 10. Zatem a*0+b=1 a*1+b=4 a*2+b=7 a*3+b=10 Widać, że a musi przybrać wartość 3, a b musi wynosić 1, żeby uzyskać interesujące nas wartości. 3*n+1=x 3*0+1=1 3*1+1=4 3*2+1=7 3*3+1=10
Poznaliśmy już pseudoklasy, wiemy jak je dodać do elementów strony HTMLi znamy działanie kilku wybranych. Pełną listę znaleźć można pod adresem https://developer.mozilla.org/en-us/docs/web/css/pseudo- classes Przejdźmy teraz do pseudoelementów. W odróżnieniu od pseudoklas, które określają styl elementów będących w danym stanie, pseudoelementy pozwalają nam ostylować wybrane części elementu pliku HTML np. pierwszą linijkę tekstu. Składania Dawniej, za czasów CSS2, używano pojedynczego dwukropka. Dziś, w CSS3, aby odróżnić pseudoklasy od pseudoelementów, przyjęto, że w tych drugich będzie się stosowało podwójny dwukropek (::) Przykładem jest pseudoelement ::after (jego zastosowanie opiszę później)
Powyższy przykład świetnie tłumaczy nazwę pseudoelementy, bowiem to co dodaliśmy, nie jest zapisane w strukturze pliku HTML (nie jest elementem pliku HTML). Bliźniaczy pseudoelement ::before ma takie samo działania, z tą różnicą, że treść dodawana jest przed elementem HTML. Spójrzmy na bardziej zaawansowany (i znacznie bardziej popularny) sposób użycia tych dwóch pseudoelementów. Najczęściej stosuje się je do dodania obiektów CSS w sąsiedztwie elementów HTML np. podkreślenia dowolnej długości i w dowolnej odległości od elementu HTML. Element do którego chcemy przypisać ::after lub ::before musi mieć ustawione position: relative;, a pseudoelement ustawiamy jako position:absolute;. Dzięki takiemu rozwiązaniu możemy umieścić go w dowolnym miejscu bazując na położeniu elementu HTML - sprytne, nieprawdaż? :)
Przy pisaniu dłuższego tekstu (np. postów na blogu) pomocny może okazać się pseudoelement ::first-letter. Jak działa? Poniższy przykład nadaje czerwony kolor i powiększa rozmiar pierwszej litery w każdym akapicie. Pełna lista dostępna jest tutaj: https://developer.mozilla.org/en-us/docs/web/css/pseudo- elements
Znając pseudoklasy i pseudoelementy i łącząc je z innymi elementami, takimi jak przejścia (transition), możemy nadać naszej stronie bardzo ciekawy wygląd oraz dodać do niej wiele interesujących efektów i interakcji z użytkownikiem. Eksperymentujcie z ich łączeniem :) Poniżej, już na zakończenie, kilka przykładów dla inspiracji. Powodzenia w dalszym kodowaniu i nauce! chmurki to ::after przypisany do menu Ciemnoszare obramowanie (wewnętrzne) to zwykły border. Jasnoszare (zewnętrzne) to ::after Aktywne pole (:focus) ma zmieniony kolor tła.