Wielokrotnie chcesz zmodyfikować element swojej witryny za pomocą CSS, ale gdy zamierzasz to zrobić, zdajesz sobie sprawę, że element nie ma żadnej klasy ani identyfikatora.
Nie martw się, nie wszystko stracone.
Dzięki PseudoClasses możemy zrobić znacznie więcej, niż sobie wyobrażasz, a w tym tutorialu zobaczymy, jak to zrobić.
Wszystko, co zobaczymy w tym samouczku działa na każdej stronie, którą tworzysz za pomocą HTML i CSS.
A konkretnie, oczywiście dotyczy to WordPressa, w rzeczywistości w naszych przykładach zrobimy to w WordPressie.
📺️ Samouczek wideo:
Suscríbete a mi kanał:
:Modyfikuj tylko pierwszy element pierwszego typu
Ta pseudoklasa pozwala nam modyfikować tylko pierwszy element tego typu z grupy elementów rodzeństwa.
Teraz zobaczymy konkretne przykłady, ale tu masz pomoc bardzo dobrze o tej pseudoklasie.
Pierwszą rzeczą, którą zmodyfikujemy, jest pierwszy element menu:
Normalnie to, co robię, gdy chcę coś zmodyfikować, to wejść do inspektora elementów mojej przeglądarki (prawy przycisk -> Sprawdź) i sprawdzić, czy element do modyfikacji ma klasę lub identyfikator:
Element, który chcę zmodyfikować, ma określony identyfikator, więc naprawdę nie muszę używać pseudoklas.
Ale wyobraź sobie, że go widziałeś i że nie wiem, czy ma identyfikator 🙈
Zamierzam zmodyfikować ten element tak, jakby ten identyfikator nie istniał.
Aby skorzystać z pseudoklas muszę dodać pseudoklasę poprzedzoną dwukropkiem:
#top-menu li:first-of-type {
margin-right: 140px;
}
A wynik jest taki:
Jak widać na powyższym zrzucie ekranu, do pierwszego elementu zastosowano tylko prawy margines.
:ostatni typ Modyfikuj tylko ostatni element
W ten sam sposób jak w poprzednim przykładzie możemy modyfikować tylko ostatni element.
Tym razem użyjemy :last-of-type w następujący sposób:
#top-menu li:last-of-type {
margin-right: 140px;
}
Wynik byłby następujący:
:nth-of-type Zmodyfikuj element lub elementy, które chcemy
Ta pseudoklasa jest bardzo potężna, ponieważ możemy odwoływać się do dowolnego konkretnego elementu, który chcemy, lub tworzyć wzorce dla wielu elementów, które mają być wybrane.
Wyobraźmy sobie, że muszę zmodyfikować drugi element mojego menu, do tego użylibyśmy nth-of-type w następujący sposób:
#top-menu li:nth-of-type(2) {
margin-right: 140px;
}
Twórz wzory za pomocą :n-tego typu na Even Elements
Jeśli zamiast odwoływać się do konkretnego elementu chcemy odwoływać się do elementu co n elementów, zrobilibyśmy to tak:
#top-menu li:nth-of-type(2n) {
margin-right: 140px;
}
Rezultatem byłoby zastosowanie marginesu do drugiego i czwartego elementu:
Twórz wzory za pomocą :n-tego typu na Odd Elements
W ten sam sposób możemy odnosić się do nieparzystych elementów w następujący sposób:
#top-menu li:nth-of-type(2n+1) {
margin-right: 140px;
}
Wynik byłby następujący:
Dodaj zmiany CSS do WordPress
Wprowadzamy zmiany CSS w inspektorze elementów. Świetnie jest to przetestować, ale jak tylko odświeżymy stronę, zmiany znikną, ponieważ zmiany te nie są zapisywane w sieci, ale w naszej własnej przeglądarce.
Aby dodać zmiany do WordPressa, jest wiele sposobów, od modyfikacji pliku CSS naszego szablonu do korzystania z samego interfejsu WordPressa.
Zamierzamy użyć samego interfejsu WordPressa, w tym celu przechodzimy do menu Dostosuj -> Dodaj dodatkowy CSS:
Klikamy i dochodzimy do ekranu, na którym musimy dodać CSS:
Ścieżka dodatkowa: Dodaj pseudoklasę do elementu podrzędnego
Jak widzieliśmy, te pseudoklasy pozwalają nam łatwo modyfikować elementy rodzeństwa, to znaczy elementy, które są na tym samym poziomie.
Ale wyobraźmy sobie, że chcemy zmienić kolor nieparzystych elementów naszego menu.
Kolor nie jest zdefiniowany w elemencie listy (li), ale w elemencie łącza (a), który znajduje się wewnątrz elementu listy:
Jeśli spojrzymy na inspektora elementów:
Jeśli przyjrzymy się bliżej, zobaczymy, że nie mogliśmy stworzyć wzoru w następujący sposób:
#top-menu li a:nth-of-type(2n+1) {
color: red;
}
Ponieważ każdy link jest w innym li, wszystkie byłyby pierwszym elementem i wszystkie zmieniłyby kolor:
To, co musielibyśmy zrobić, to zastosować wzorzec z pseudoklasą do elementu li w następujący sposób:
#top-menu li:nth-of-type(2n+1) a {
color: red;
}
W wyniku czego naprawdę chcieliśmy:
Jak widzieliśmy, to nie koniec świata, jeśli nie mamy identyfikatora lub klasy.
Dzięki pseudoklasom mamy dostęp do niemal każdego elementu naszego HTML.
Mam nadzieję, że Ci się podobało 😉