Poprzedni element CSS – jak go wybrać i manipulować nim?

Czy kiedykolwiek zastanawiałeś się, jak w CSS odwołać się do poprzedniego elementu? Jeśli tak, nie jesteś sam. Wielu deweloperów staje przed wyzwaniem manipulacji elementami, które poprzedzają bieżący selektor. W tym artykule przyjrzymy się, jak można podejść do tego problemu i jakie są dostępne metody. Zapnij pasy i przygotuj się na podróż w głąb tajników CSS!

Co to jest poprzedni element CSS?

Zanim zanurzymy się w technikalia, warto zrozumieć, czym właściwie jest „poprzedni element CSS”. W kontekście modelu DOM (Document Object Model), elementy na stronie są ułożone w strukturę drzewa. Każdy element może mieć rodzica, dziecko, rodzeństwo – zarówno następne, jak i poprzednie.

Poprzedni element to po prostu element, który w strukturze DOM występuje bezpośrednio przed danym elementem na tym samym poziomie hierarchii. Na przykład, jeśli mamy listę punktowaną, każdy element <li> jest rodzeństwem dla pozostałych <li>. Poprzedni element to ten, który jest umieszczony bezpośrednio przed obecnym.

W CSS mamy wiele selektorów umożliwiających wybór elementów na podstawie ich relacji w DOM. Jednak wybór poprzedniego elementu nie jest tak prosty, jak mogłoby się wydawać.

Selektory CSS do wyboru poprzednich elementów

Czy istnieje pseudoklasa :previous-sibling?

Niestety, CSS nie oferuje wbudowanej pseudoselektor takiej jak :previous-sibling, która pozwoliłaby bezpośrednio wybrać poprzedni element. Oznacza to, że nie możemy w prosty sposób napisać selektora, który odwołuje się do elementu poprzedzającego inny element.

Ale nie wszystko stracone! Istnieją sposoby, by obejść to ograniczenie i osiągnąć zamierzony efekt przy użyciu innych technik.

Nowa specyfikacja CSS Selectors Level 4 wprowadza pseudoselektor :has(), która otwiera przed nami nowe możliwości. Dzięki niej możemy wybierać elementy na podstawie ich potomków lub innych relacji.

Na przykład:

li:has(+ li.selected) {
  /* Styl dla li, po którym następuje li z klasą selected */
}

Ten selektor wybierze każdy element <li>, po którym następuje <li class="selected">. W ten sposób możemy stylizować poprzedni element względem wybranego.

Jednak warto pamiętać, że wsparcie dla :has() w przeglądarkach jest wciąż ograniczone, więc przed użyciem tej metody należy sprawdzić kompatybilność.

Wykorzystanie jQuery do manipulacji poprzednimi elementami

Jeśli potrzebujemy bardziej natychmiastowego rozwiązania, JavaScript i biblioteka jQuery przychodzą z pomocą. jQuery oferuje metodę .prev(), która pozwala łatwo wybrać poprzedni element.

Przykład:

$('.selected').prev().css('color', 'red');

Ten kod wybierze poprzedni element względem elementu z klasą selected i zmieni jego kolor tekstu na czerwony.

Manipulacja DOM za pomocą czystego JavaScript

Nie musisz korzystać z jQuery, by manipulować poprzednimi elementami. Czysty JavaScript oferuje podobne możliwości dzięki właściwościom takim jak previousElementSibling.

Przykład:

const selectedElement = document.querySelector('.selected');
const previousElement = selectedElement.previousElementSibling;

if (previousElement) {
  previousElement.style.color = 'red';
}

Ten kod działa podobnie jak przykład z jQuery, ale nie wymaga dodatkowych bibliotek.

Praktyczne przykłady zastosowania CSS do poprzednich elementów

Wyobraź sobie, że masz listę kroków w procesie rejestracji, a chcesz podkreślić wszystkie kroki poprzedzające bieżący. Jak to zrobić?

Stylizacja kroków procesu

Za pomocą :has() możemy osiągnąć efekt podświetlenia poprzednich kroków:

li:has(+ li.current) {
  background-color: lightgray;
}

W tym przypadku każdy element <li>, po którym następuje element z klasą current, zostanie podświetlony.

Nawigacja z aktywnym elementem

Jeśli masz menu nawigacyjne i chcesz, by poprzedni element względem aktywnego miał inny styl, możesz użyć JavaScript:

const currentItem = document.querySelector('.nav .active');
const previousItem = currentItem.previousElementSibling;

if (previousItem) {
  previousItem.classList.add('before-active');
}

Następnie w CSS:

.before-active {
  font-weight: bold;
}

Formularze z dynamiczną walidacją

W formularzach może być konieczne wskazanie błędu w polu poprzedzającym obecne. JavaScript pozwala na dynamiczne dodawanie klas do poprzednich elementów w zależności od warunków.

Podsumowanie i wnioski

Choć CSS nie oferuje bezpośredniego sposobu na wybór poprzedniego elementu, istnieje wiele metod, które pozwalają osiągnąć ten efekt. Dzięki wykorzystaniu nowoczesnych selektorów, takich jak :has(), oraz wsparciu JavaScript i jQuery, możemy manipulować poprzednimi elementami w DOM i tworzyć bardziej dynamiczne i interaktywne strony.

Pamiętaj, że kluczem jest zrozumienie struktury DOM i dostępnych narzędzi. Nie bój się eksperymentować i testować różnych podejść, aby znaleźć to, które najlepiej pasuje do Twojego projektu.

Jeśli chcesz pogłębić swoją wiedzę na temat manipulacji elementami w CSS i JavaScript, zacznij od praktyki! Spróbuj zastosować omówione techniki w swoim kodzie i zobacz, jakie efekty możesz osiągnąć.