Aby ułatwić czytanie tabel, często pomocne jest stylizowanie wierszy z naprzemiennymi kolorami tła. Jednym z najczęstszych sposobów stylizowania tabel jest ustawienie koloru tła każdego innego wiersza. Jest to często określane jako „paski zebry”.
Możesz to osiągnąć, ustawiając co drugi wiersz klasą CSS, a następnie definiując styl dla tej klasy. To działa, ale nie jest najlepszym ani najskuteczniejszym sposobem na to. Korzystając z tej metody, za każdym razem, gdy trzeba edytować tę tabelę, może być konieczne edytowanie każdego wiersza w tabeli, aby upewnić się, że każdy wiersz jest zgodny ze zmianami. Na przykład, jeśli wstawisz nowy wiersz do tabeli, każdy kolejny wiersz poniżej musi mieć zmienioną klasę.
CSS ułatwia stylizację stołów w paski zebry. Nie musisz dodawać żadnych dodatkowych HTML atrybuty lub klasy CSS, wystarczy użyć: n-tego typu (n) Selektor CSS.
Selektor: nth-of-type (n) to strukturalna pseudoklasa w CSS, która umożliwia stylizowanie elementów na podstawie ich relacji z elementami rodzica i rodzeństwa. Możesz go użyć, aby wybrać jeden lub więcej elementów na podstawie ich kolejności źródłowej. Innymi słowy, może dopasować każdy element, który jest n-tym dzieckiem określonego typu jego rodzica.
Litera n może być słowem kluczowym (na przykład nieparzystym lub parzystym), liczbą lub formułą.
Na przykład, aby wystylizować każdy inny znacznik akapitu z żółtym kolorem tła, dokument CSS będzie zawierał:
p: n-ty-typ (nieparzysty) {
tło: żółte;
}
Zacznij od swojej tabeli HTML
Najpierw utwórz tabelę tak, jak zwykle piszesz ją w HTML. Nie dodawaj żadnych specjalnych klas do wierszy ani kolumn.
W arkuszu stylów dodaj następujący kod CSS:
tr: n-ty-typ (nieparzysty) {
kolor tła:#ccc;
}
Spowoduje to stylizację każdego drugiego wiersza na szary kolor tła, zaczynając od pierwszego wiersza.
Styl naprzemiennych kolumn w ten sam sposób
Ten sam rodzaj stylizacji można zastosować do kolumn w tabelach. Aby to zrobić, po prostu zmień tr w swojej klasie CSS na td. Na przykład:
td: n-ty-typ (nieparzysty) {
kolor tła:#ccc;
}
Używanie formuł w selektorze n-tego typu (n)
Składnia formuły używanej w selektorze to an+b.
- a to liczba reprezentująca rozmiar cyklu lub indeksu.
- n jest w rzeczywistości literą „n” i reprezentuje licznik, który zaczyna się od 0.
- + to operator, którym może być również „-”
- b jest liczbą całkowitą i reprezentuje wartość przesunięcia — na przykład, o ile wierszy w dół selektor powinien zacząć stosować kolor tła. Jest to wymagane, jeśli w formule uwzględniono operator.
Na przykład, jeśli chcesz ustawić kolor tła dla każdego trzeciego wiersza, Twoja formuła będzie wynosić 3n+0. Twój CSS może wyglądać tak:
tr: n-ty-typ (3n+0) {
tło: łupkowoszary;
}
Pomocne narzędzia do korzystania z selektora n-tego typu
Jeśli czujesz się trochę zniechęcony aspektem formuły używania pseudoklasowego selektora typu nth-of-type, wypróbuj: n-tą stronę testera jako przydatne narzędzie, które może pomóc w zdefiniowaniu składni w celu uzyskania pożądanego wyglądu. Użyj menu rozwijanego, aby wybrać nth-of-type (możesz także poeksperymentować z innymi pseudoklasami, takimi jak nth-child).