Wprowadzenie
W poprzednim artykule poznałeś między innymi selektory atrybutów, pseudo-elementów oraz pseudo-klas, które były tylko wspomniane z dosłownie jednym przykładem, aby nakreślić ich znaczenie. W tym artykule szczegółowo przyjrzymy się większości z nich, wymienię możliwie najwięcej powszechnie stosowanych pseudo-klas i pseudo-elementów. Dobra znajomość i zrozumienie tego materiału zdecydowanie wyróżni Cię z grona osób, które dopiero zaczynają swoją przygodę. Dla przypomnienia dodam, że pseudo-klasy, pseudo-elementy oraz selektory atrybutów służą nie tylko do określania specyficzności elementu. W kolejnych sekcjach opiszę ich użycie oraz najczęstsze zastosowania.
Selektor atrybutów
Możesz używać atrybutów do dokładnego określenia elementów, na które chcesz zastosować style. Pozwalają Ci one wyszukiwać elementy na podstawie określonych wartości lub wzorców występujących w atrybucie elementu, co daje Ci sporo możliwości. Aby ich używać, możesz skorzystać z następujących operatorów:
użycie nazwy atrybutu w
[ ]nawiasach, jak w przykładzie poniżej wybierze Ci wszystkie elementy, które posiadają atrybuttarget
przykład:
operator
=wybiera elementy, których wartość atrybutu jest dokładnie taka sama jak określona wartość.
Powyższy selektor wybierze wszystkie elementy <a>, których atrybut href ma wartość "https://www.google.com" i zastosuje dla nich styl zmieniający kolor czcionki na niebieski.
operator
*=wybiera elementy, których wartość atrybutu zawiera określony fragment.
Powyższy selektor wybierze wszystkie elementy <input>, których atrybut type zawiera frazę "text" i zastosuje dla nich styl zmieniający obramowanie na szare.
operatory
^=oraz$=z kolei wybierają elementy, których atrybuty odpowiednio dlahrefzaczyna się od "https://" oraz dlasrckończy się na ".png". Zostaną wtedy przypisane odpowiednie style.
Szczególnie przydatne może okazać się stosowanie selektorów atrybutów w momencie, gdy chcesz stylizować elementy posiadające jednakowe wartości atrybutów, dodatkowo gdy zgłębisz nieco język Javascript będziesz mógł wpływać na wartości tych atrybutów poprzez np. interakcję użytkownika, a style przez Ciebie nadane dynamicznie się dostosują. Co chyba najważniejsze to, to że możesz nadawać style elementom niezależnie od struktury HTML, albowiem nie ma znaczenia, gdzie dany element będzie się znajdować.
Pseudo-klasy
W CSS możemy odnieść się do konkretnych elementów lub zachowań stosując pseudo-klasy. Możesz przykładowo przypisać jakie style mają zostać zastosowane w danym elemencie, gdy zostanie najechany kursorem:
Te proste reguły zastosowane powyżej określają, że element button ma normalnie przydzielony kolor tła na biały, natomiast gdy zostanie najechany kursorem jego kolor zmieni się na różowy. Dodatkowa reguła z transition została dodana tylko w celu płynnej zmiany koloru w czasie 0.3 sekundy, gdyby jej nie było sama zmiana również nastąpi, lecz kolor zmieni się natychmiastowo co może być nieprzyjemne lub wręcz przeciwnie w odczuciach użytkownika, w osobnym artykule opiszemy czym jest UX (User Experiance), w skrócie są to zasady, których użytkownik wręcz podświadomie oczekuje od strony czy aplikacji z której korzysta. Dobrym przykładem jest chociażby zastosowanie odpowiednich kolorów w projekcie, nie każdy się nad tym zastanawia, ale nie bez powodu działania destrukcyjne takie jak: usuwanie, wyłączanie, anulowanie, pomijanie są często stylowane w kolorze czerwonym, który sugeruje nam powagę podjętej decyzji, kolor zielony odpowiada często za zapisywanie, akceptowanie, potwierdzanie itd. ale jak wspomniałem zdecydowanie jest to temat na osobny artykuł. Wracając do tematu to jestem przekonany, że nie każdy początkujący developer zna wszystkie wymienione tutaj pseudo-klasy.
Poniższa tabela prezentuje wszystkie (na dzień pisania niniejszego artykułu) dostępne pseudo-klasy w CSS:
pseudo-klasa | opis |
|---|---|
:active | zdarzenie to następuje w momencie akcji użytkownika takiej jak kliknięcie lub tapnięcie (w przypadku urządzeń mobilnych) natomiast najechanie kursorem nie aktywuje tego efektu. Warto dodać, że czas utrzymania tego zdarzenia jest zazwyczaj krótki albowiem dotyczy momentu kliknięcia / tapnięcia i zostaje zdezaktywowany w momencie puszczenia przycisku myszy lub palca z ekranu |
:hover | uaktywnia się w momencie najechania kursora na element, do którego się odnosimy |
:focus | aktywuje się w momencie kliknięcia lub przejścia tabulatorem na dany element. Różnica między :active, a :focus polega na tym że :focus nie ustępuje po puszczenia przycisku myszy lub palca z ekranu, jest to stan utrzymujący się tak długo dopóki nie zmienimy naszego celu |
:visited | używając tej pseudo-klasy możemy określić style dla linków, które zostały odwiedzone (oczywiście domyślnie style te są określone przez przeglądarkę, które na pewno kojarzysz chociażby z odwiedzonych linków w wyszukiwarkach internetowych) |
:link | określa style dla linków jeszcze nieodwiedzonych |
:first-child | element, który zostaje wybrany po przypisaniu tej pseudo-klasy oznacza, że wybierasz jego pierwsze dziecko (czyli element, który w drzewie DOM jest jako pierwszy wewnątrz niego) |
:last-child | element, który zostaje wybrany po przypisaniu tej pseudo-klasy oznacza, że wybierasz jego ostatnie dziecko (czyli element, który w drzewie DOM jest jako ostatni wewnątrz niego) |
:nth-child(n) | ta pseudo-klasa pozwala na wybranie któregoś dziecka, gdzie |
:nth-last-child(n) | podobny do swojego poprzednika z jedną różnicą iż liczy kolejne dzieci od ostatniego elementu |
:first-of-type | pozwala określić Ci pierwsze wystąpienie typu elementu dla przykładu |
:last-of-type | działa tak, jak poprzednia pseudo-klasa z tym, że określa ostatnie wystąpienie typu |
:nth-of-type(n) | tu możesz określić któreś wystąpienie typu zgodnie z zasadami poznanymi w opisie |
:nth-last-of-type(n) | określa któreś wystąpienie typu licząc od ostatniego elementu |
:only-child | dopasowuje element, który jest jedynym dzieckiem swojego rodzica |
:only-of-type | dopasowuje element, który jest jedynym wystąpieniem typu wśród swojego "rodzeństwa" |
:empty | w ten sposób możesz wybrać element, który nie ma żadnych dzieci lub nie posiada treści tekstowej |
:checked | przydatny, gdy chcesz określić elementy input typu checkbox lub radio, które są wybrane (zaznaczone) |
:disabled | w ten sposób możesz określić style dla elementów formularza lub przycisków, gdy są niedostępne. Wyłączenie w/w elementów odbywa się poprzez dodanie do nich w HTML lub za pośrednictwem Javascript atrybutu |
:enabled | oznacza, że wybierasz elementy, które są dostępne, a oznacza to że użytkownik ma możliwość interakcji z nimi, czyli możesz coś wpisać w |
:target | możesz tego użyć w przypadku, gdy chcesz nadać style dla elementu, który ma zakotwiczenie z linkiem. Dla lepszego zrozumienia załóżmy, że masz nawigację, której element posiada link |
:not(selector) | bardzo ciekawa pseudo-klasa pozwalająca dość precyzyjnie określić wybierany element, jako |
:root | ta pseudo-klasa wybiera główny element dokumentu np. |
Jeśli myślisz, że to wszystko to nic z tego, możliwości jakie niesie ze sobą CSS są niemalże nieograniczone, tym krótkim wstępem do kolejnej porcji wiedzy poznaj pseudo-elementy.
Pseudo-elementy
W tabeli poniżej przedstawię Ci pseudo-klasy, które w rękach obytego dewelopera potrafią zdziałać cuda. Zauważ różnicę, że tak jak wcześniej w przypadku pseudo-klas odnosiliśmy się do elementów np. p:first-child (element p będący pierwszy dzieckiem) stosowaliśmy pojedynczy : w przypadku pseudo-elementów stosujemy :: podwójny. Chcę też zaznaczyć Ci w tym miejscu, że generalnie jest to (w niektórych przypadkach) przyjęta konwencja, której zalecam się trzymać jednak, gdybyś przypadkiem spotkał się w starszym kodzie z zapisem pojedynczym, dla niżej wymienionych pseudo-elementów to nie zdziw się, gdyż w CSS wersji 2 zarówno pseudo-klasy, jak i pseudo-elementy były definiowane stosując taki zapis. Specyfikacja CSS w wersji 3 wprowadziła składnię podwójnego :: dla pseudo-elementów co pozwala na ich odróżnienie od pseudo-klas, jest to zabieg bardziej przejrzysty co pozwala też uniknąć nieporozumień. Ze względu na kompatybilność wsteczną (kod napisany kiedyś, nadal musi działać) starszy zapis zostanie zaakceptowany, lecz nie w każdym przypadku, bo dla przykładu ::before, ::after, ::first-letter czy też ::first-line nie przejdą bez zastosowania podwójnego :: jednak jeszcze raz podkreślam, że stanowczo zalecam stosować ogólnie przyjętą konwencję, aby rozgraniczać w ten sposób pseudo-klasy i pseudo-elementy.
pseudo-element | opis |
|---|---|
::before | służy do wstawiania zawartości przed elementem, która nie modyfikuje drzewa DOM (struktury HTML). Można tego, jak i kolejnego pseudo-elementu używać w wielu przypadkach, albowiem jego zawartością może być tekst, ale też obrazek lub dodatkowy element stworzony przez Ciebie - taki wirtualny. Ważną kwestią jest, że wymaga ona co najmniej jednej właściwości i jest nią |
::after | tak, jak jego poprzednik niesie ze sobą wiele możliwości, lecz wstawia zawartość za elementem |
::first-letter | możesz użyć tego pseudo-elementu do stylizowania pierwszej litery tekstu, który jest zawartością wybranego przez Ciebie elementu. Z książek lub artykułów możesz kojarzyć, jak czasami rozdział zaczyna się od znacząco większej pierwszej litery, dla przykładu |
::first-line | podobny do |
::selection | ten pseudo-element również dotyczy tekstu i posłuży wtedy kiedy chcemy zmienić style dla tekstu zaznaczonego przez użytkownika |
::placeholder | używany w elementach |
::marker | stosowany do zmieniania styli markerów list numerowanych i nienumerowanych. Przykładowo lista nienumerowana domyślnie listuje marker •, numerowana liczby, oczywiście istnieją też inne znaki przy obu tych listach przy odpowiednim dostosowaniu (co opisywałem w jednym z artykułów o HTML), a ich dodatkowy styl można zmienić właśnie za pomocą tego pseudo-elementu |
Oczywiście istnieje jeszcze wiele innych pseudo-klas oraz pseudo-elementów, jednak nie wszystkie są szeroko wspierane przez najpopularniejsze przeglądarki, część z tych których nie wymieniłem są też zwyczajnie rzadko używane lub dopiero przechodzą fazę eksperymentalną. Jednak gdyby nadal było Tobie mało i chciałbyś poznać jeszcze inne możliwości, które oferuje CSS poprzez stosowanie pseudo-klas i pseudo elementów to zachęcam do odwiedzenia strony MDN.
Podsumowanie
W niniejszym artykule poznałeś, jak stosować selektor atrybutów oraz listy powszechnie używanych pseudo-klas i pseudo-elementów i ich zastosowania. Moim subiektywnym zdaniem nie staraj się też ich uczyć na pamięć, ale warto znać możliwości jakie możesz użyć, to że zapomina się nazwy danej funkcjonalności, właściwości czy funkcji to często norma. Bez trudu odnajdziesz wtedy potrzebną nazwę w internecie.
