Warunkowe stylizowanie wybranych elementów w kontenerze siatki

Kalendarze, koszyki na zakupy, galerie, eksploratory plików i biblioteki online to niektóre sytuacje, w których elementy do wybrania są wyświetlane w siatkach (tj. kratach kwadratowych). Wiesz, nawet te kontrole bezpieczeństwa, które wymagają wybrania wszystkich obrazów z przejściami dla pieszych lub cokolwiek innego.

Znalazłem zgrabny sposób wyświetlania opcji do wyboru w siatce. Nie, nie odtworzenie tego reCAPTCHA, ale po prostu możliwość wybrania wielu elementów. A gdy wybierzemy dwa lub więcej sąsiadujących ze sobą elementów, możemy użyć sprytnego :nth-of-type kombinatory, pseudoelementy i :checked pseudo-klasa, aby stylizować je w taki sposób, aby wyglądały na zgrupowane.

Cały pomysł na kombinatory i pseudosy, aby uzyskać zaokrąglone pola wyboru, pochodzi z a poprzedni artykuł napisałem. Był to prosty projekt jednokolumnowy:

Tym razem jednak efekt zaokrąglenia jest stosowany do elementów wzdłuż osi pionowej i poziomej na siatce. Nie musisz czytać mojego ostatniego artykułu na temat stylizacji pól wyboru, ponieważ zamierzam omówić tutaj wszystko, co musisz wiedzieć. Ale jeśli interesuje Cię odchudzone podejście do tego, co robimy w tym artykule, to warto sprawdzić ten.

Zanim zaczniemy…

Warto zwrócić uwagę na kilka rzeczy. Na przykład używam statycznego HTML i CSS w moim demo dla uproszczenia. W zależności od aplikacji może być konieczne dynamiczne generowanie siatki i zawartych w niej elementów. Pomijam praktyczne kontrole dostępności, aby skupić się na efekcie, ale zdecydowanie warto rozważyć takie rzeczy w środowisku produkcyjnym.

Również używam CSS Grid dla układu. Polecam to samo, ale oczywiście to tylko osobiste preferencje, a Twój przebieg może się różnić. Dla mnie użycie siatki pozwala mi łatwo używać selektorów rodzeństwa do celowania w element ::before i ::after pseudo.

Dlatego niezależnie od standardu układu, którego chcesz użyć w swojej aplikacji, upewnij się, że pseudosy mogą być nadal kierowane w CSS i upewnij się, że układ pozostaje nienaruszony w różnych przeglądarkach i na różnych ekranach.

Zacznijmy teraz

Jak mogłeś zauważyć we wcześniejszym demo, zaznaczanie i odznaczanie elementu checkbox modyfikuje wygląd pól, w zależności od stanu zaznaczenia innych pól wyboru wokół niego. Jest to możliwe, ponieważ stylizowałem każde pudełko, używając pseudoelementów sąsiadujących z nim elementów zamiast własnego elementu.

Poniższy rysunek pokazuje, w jaki sposób ::before pseudoelementy pudełek w każdym kolumna (z wyjątkiem pierwszej kolumny) zachodzą na pola po lewej stronie i jak ::after pseudoelementy pudełek w każdym rząd (z wyjątkiem pierwszego rzędu) zachodzą na pola powyżej.

Oto kod podstawowy

Oznaczenia są dość proste:

<main> <input type=checkbox> <input type=checkbox> <input type=checkbox> <!-- more boxes -->
</main>

W początkowym CSS dzieje się trochę więcej. Ale najpierw sama siatka:

/* The grid */
main { display: grid; grid: repeat(5, 60px) / repeat(4, 85px); align-items: center; justify-items: center; margin: 0;
}

To siatka składająca się z pięciu wierszy i czterech kolumn zawierających pola wyboru. Postanowiłem wymazać domyślny wygląd pól wyboru, a następnie nadać im własne jasnoszare tło i super zaokrąglone obramowania:

/* all checkboxes */
input { -webkit-appearance: none; appearance: none; background: #ddd; border-radius: 20px; cursor: pointer; display: grid; height: 40px; width: 60px; margin: 0;
}

Zauważ też, że same pola wyboru to siatki. To klucz do umieszczenia ich ::before i ::after pseudoelementy. A skoro o tym mowa, zróbmy to teraz:

/* pseudo-elements except for the first column and first row */
input:not(:nth-of-type(4n+1))::before,
input:nth-of-type(n+5)::after { content: ''; border-radius: 20px; grid-area: 1 / 1; pointer-events: none;
}

Wybieramy tylko pseudoelementy pól wyboru, których nie ma w pierwszej kolumnie ani w pierwszym wierszu siatki. input:not(:nth-of-type(4n+1)) zaczyna się od pierwszego pola wyboru, a następnie wybiera ::before co czwartej pozycji stamtąd. Ale zauważ, że mówimy :not(), więc tak naprawdę to, co robimy, to pomijanie dotychczasowy ::before pseudoelement co czwartego pola wyboru, zaczynając od pierwszego. Następnie stosujemy style do ::after pseudo każdego pola wyboru od piątego.

Teraz możemy stylizować zarówno ::before i ::after pseudos dla każdego pola wyboru, które nie znajduje się w pierwszej kolumnie lub wierszu siatki, tak że są one przesuwane odpowiednio w lewo lub w górę, domyślnie ukrywając je.

/* pseudo-elements other than the first column */
input:not(:nth-of-type(4n+1))::before { transform: translatex(-85px);
} /* pseudo-elements other than the first row */
input:nth-of-type(n+5)::after { transform: translatey(-60px); }

Stylizacja :checked były

Teraz nadchodzi stylizacja pól wyboru, gdy są w :checked państwo. Najpierw nadajmy im kolor, powiedzmy limegreen tło:

input:checked { background: limegreen; }

Zaznaczone pole powinno umożliwiać zmianę stylu wszystkich sąsiednich zaznaczonych pól. Innymi słowy, jeśli zaznaczymy jedenaste pole wyboru w siatce, powinniśmy również móc nadać styl ramkom otaczającym je u góry, u dołu, z lewej i prawej strony.

Odbywa się to poprzez celowanie we właściwe pseudoelementy. Jak to zrobimy? Cóż, to zależy od rzeczywistej liczby kolumn w siatce. Oto CSS, jeśli dwa sąsiednie pola są zaznaczone w siatce 5⨉4:

/* a checked box's right borders (if the element to its right is checked) */
input:not(:nth-of-type(4n)):checked + input:checked::before { border-top-right-radius: 0; border-bottom-right-radius: 0; background: limegreen;
}
/* a checked box's bottom borders (if the element below is checked) */
input:nth-last-of-type(n+5):checked + * + * + * + input:checked::after { border-bottom-right-radius: 0; border-bottom-left-radius: 0; background: limegreen;
}
/* a checked box's adjacent (right side) checked box's left borders */
input:not(:nth-of-type(4n)):checked + input:checked + input::before { border-top-left-radius: 0; border-bottom-left-radius: 0; background: limegreen;
}
/* a checked box's adjacent (below) checked box's top borders */
input:not(:nth-of-type(4n)):checked + * + * + * + input:checked + input::before { border-top-left-radius: 0; border-top-right-radius: 0; background: limegreen;
}

Jeśli wolisz, możesz wygenerować powyższy kod dynamicznie. Jednak w typowej siatce, powiedzmy w galerii obrazów, liczba kolumn będzie niewielka i prawdopodobnie będzie to stała liczba elementów, podczas gdy wiersze mogą się stale zwiększać. Zwłaszcza jeśli jest przeznaczony do ekranów mobilnych. Dlatego to podejście jest nadal skuteczną drogą. Jeśli z jakiegoś powodu Twoja aplikacja ma ograniczoną liczbę wierszy i rozszerzających się kolumn, rozważ obrócenie siatki na boki, ponieważ przy strumieniu elementów CSS Grid układa je od lewej do prawej i od góry do dołu (tj. wiersz po wierszu). .

Musimy również dodać stylizację dla ostatnich pól wyboru w siatce — nie wszystkie są pokryte pseudoelementami, ponieważ są ostatnimi elementami na każdej osi.

/* a checked box's (in last column) left borders */
input:nth-of-type(4n-1):checked + input:checked { border-top-left-radius: 0; border-bottom-left-radius: 0;
}
/* a checked box's (in last column) adjacent (below) checked box's top borders */
input:nth-of-type(4n):checked + * + * + * + input:checked { border-top-left-radius: 0; border-top-right-radius: 0;
}

To są trudne selektory! Pierwszy…

input:nth-of-type(4n-1):checked + input:checked

…w zasadzie mówi tak:

Sprawdzone <input> element obok zaznaczonego <input> w przedostatniej kolumnie.

I nth-of-type oblicza się tak:

4(0) - 1 = no match
4(1) - 1 = 3rd item
4(2) - 1 = 7th item
4(3) - 1 = 11th item
etc.

Tak więc zaczynamy od trzeciego pola wyboru, a następnie wybieramy co czwarte. A jeśli pole wyboru w tej sekwencji jest zaznaczone, stylizujemy również sąsiadujące pola wyboru, jeśli również są zaznaczone.

I ta linia:

input:nth-of-type(4n):checked + * + * + * + input:checked

Mówi to:

An <input> element, pod warunkiem, że jest zaznaczony, sąsiaduje bezpośrednio z elementem, który sąsiaduje bezpośrednio z innym elementem, który również sąsiaduje bezpośrednio z innym elementem, który z kolei sąsiaduje bezpośrednio z innym elementem <input> element, który jest w stanie zaznaczonym.

Oznacza to, że zaznaczamy co czwarte pole wyboru, które jest zaznaczone. A jeśli pole wyboru w tej sekwencji jest zaznaczone, stylizujemy następne czwarte pole z tego pola wyboru, jeśli również jest zaznaczone.

Oddanie go do użytku

To, na co właśnie spojrzeliśmy, to ogólna zasada i logika projektu. Ponownie, to, jak przydatne jest w twojej aplikacji, będzie zależeć od projektu siatki.

Użyłem zaokrąglonych obramowań, ale możesz wypróbować inne kształty, a nawet poeksperymentować z efektami tła (Temani pokrył Cię pomysłami). Teraz, gdy wiesz, jak działa formuła, reszta zależy wyłącznie od Twojej wyobraźni.

Oto przykład tego, jak może wyglądać w prostym kalendarzu:

Znowu jest to jedynie wstępny prototyp wykorzystujący znaczniki statyczne. Ponadto w przypadku funkcji kalendarza należy wziąć pod uwagę wiele kwestii dotyczących ułatwień dostępu.

---

To okład! Całkiem schludny, prawda? To znaczy, nie ma nic „nowego” w tym, co się dzieje. Ale to dobry przykład wybieranie rzeczy w CSS. Jeśli mamy do czynienia z bardziej zaawansowanymi technikami wybierania, które wykorzystują kombinatory i pseudosy, to nasze możliwości stylizacji mogą wykraczać daleko poza stylizowanie jednego elementu — jak widzieliśmy, możemy warunkowo stylizować elementy w oparciu o stan innego elementu.

---

Warunkowe stylizowanie wybranych elementów w kontenerze siatki pierwotnie opublikowany w dniu Sztuczki CSS. Powinieneś pobierz biuletyn.

• Coinsmart. Najlepsza w Europie giełda bitcoinów i kryptowalut.
• Platoblockchain. Web3 Inteligencja Metaverse. Wzmocniona wiedza. DARMOWY DOSTĘP.
• CryptoJastrząb. Radar Altcoin. Bezpłatna wersja próbna.
• Źródło: https://css-tricks.com/conditionally-styling-selected-elements-in-a-grid-container/