A táblázatok könnyebb olvashatósága érdekében gyakran hasznos a sorok váltakozó háttérszínnel történő stilizálása. A táblázatok stilizálásának egyik leggyakoribb módja az, hogy minden más sor háttérszínét beállítja. Ezt gyakran "zebracsíknak" nevezik.
Ezt úgy teheti meg, hogy minden második sort beállít egy CSS osztállyal, majd meghatározza az adott osztály stílusát. Ez működik, de nem ez a legjobb vagy leghatékonyabb módszer. Ennek a módszernek a használatakor minden alkalommal, amikor módosítania kell a táblázatot, előfordulhat, hogy a táblázat minden egyes sorát szerkesztenie kell annak biztosítása érdekében, hogy minden sor összhangban legyen a változásokkal. Például, ha új sort illeszt be a táblázatba, akkor az alatta lévő minden második sorban meg kell változtatni az osztályt.
CSS megkönnyíti a zebra csíkokkal ellátott asztalok stílusát. Nem kell hozzá extra HTML attribútumokat vagy CSS osztályokat, csak a következőt használja: n-of-type (n) CSS választó.
Az: n-of-type (n) választó egy strukturális álosztály a CSS-ben, amely lehetővé teszi elemek stílusát a szülő és a testvér elemekkel való kapcsolatuk alapján. Segítségével kiválaszthat egy vagy több elemet a forrás sorrendje alapján. Más szavakkal, minden olyan elemhez illeszkedhet, amely a szülő adott típusának n-edik gyermeke.
Az n betű lehet kulcsszó (például páratlan vagy páros), szám vagy képlet.
Például minden más bekezdéscímke sárga háttérszínnel történő stílusához a CSS-dokumentum a következőket tartalmazza:
p: n-edik típus (páratlan) {
háttér: sárga;
}
Kezdje a HTML táblázatával
Először hozza létre a táblázatot, ahogy HTML-ben írta. Ne adjon hozzá speciális osztályokat a sorokhoz vagy oszlopokhoz.
A stíluslapban adja hozzá a következő CSS-t:
tr: n-dik típus (páratlan) {
háttérszín: #ccc;
}
Ez minden második sort az első sorral kezdődő szürke háttérszínnel stílusosít.
Stílusa váltakozó oszlopok ugyanúgy
A táblázatok oszlopaihoz hasonló stílusú lehet. Ehhez egyszerűen módosítsa a CSS osztály tr-jét td-re. Például:
td: n-dik típus (páratlan) {
háttérszín: #ccc;
}
Képletek használata az n-edik típusú (n) választóban
A választóban használt képlet szintaxisa egy + b.
- az a szám, amely a ciklust vagy az index méretét képviseli.
- n valójában az "n" betű, és egy számlálót jelent, amely 0-nál csillagozik.
- + operátor, amely lehet "-" is
- b egész szám, és az eltolás értékét képviseli - például hány sorral lefelé kell kezdeni a választónak a háttérszín alkalmazását. Erre akkor van szükség, ha egy operátor szerepel a képletben.
Például, ha minden 3. sorhoz háttérszínt szeretne beállítani, akkor a képlete 3n + 0 lenne. A CSS így nézhet ki:
tr: n-edik típus (3n + 0) {
háttér: slategray;
}
Hasznos eszközök az n-ik típusú választó használatához
Ha kissé ijesztőnek érzi magát az ál osztály n-edik típusú választójának képlet szempontja miatt, próbálja ki az: n. Tester webhelyet hasznos eszköz, amely segít meghatározni a szintaxist a kívánt megjelenés elérése érdekében. A legördülő menü segítségével válassza ki az n-edik típust (itt is kísérletezhet más ál-osztályokkal, például az n-edik gyermekkel).