Utilitzant: nth-of-type (n) amb taules
Per fer que les taules siguin més fàcils de llegir, sovint és útil marcar files amb colors alternatius. Una de les maneres més habituals de les taules d'estil és establir el color de fons de qualsevol altra fila. Sovint es coneix com "ratlles de zebra".
Podeu aconseguir que això sigui configurant qualsevol altra fila amb una classe CSS i definint l'estil d'aquesta classe. Això funciona, però no és la millor o més eficient.
Quan utilitzeu aquest mètode, cada vegada que necessiteu editar aquesta taula, és possible que hàgiu d'editar totes les files de la taula per garantir que cada fila sigui compatible amb els canvis. Per exemple, si inseriu una nova fila a la vostra taula, cada altra fila següent ha de canviar la classe.
CSS facilita les taules d'estil amb ratlles de zebra. No cal afegir cap atribut HTML o classes CSS addicionals, simplement feu servir el selector CSS de nth-of-type (n).
El selector nth-of-type (n) és una pseudoclasa estructural en CSS que permet elements d'estil basats en les seves relacions amb elements primaris i germans. Podeu utilitzar-lo per seleccionar un o més elements en funció del seu codi font. Dit d'una altra manera, pot combinar tots els elements que constitueixen el nen fill d'un tipus particular de la seva família.
La lletra n pot ser una paraula clau (com imparell o parell), un número o una fórmula.
Per exemple, a l'estil de cada etiqueta de paràgraf amb un color de fons groc, el document CSS inclouria:
p: n-de-tipus (imparell) {
fons: groc;
}
Comenceu amb la taula HTML
Primer, creeu la vostra taula tal com normalment l'escriviu en HTML. No afegiu cap classe especial a les files o columnes.
Al full d'estils, afegiu el següent CSS:
tr: n-de-tipus (imparell) {
color de fons: #ccc;
}
Això estilitzarà cada altra fila amb un color de fons gris començant per la primera fila.
Columnes alternatives d'estil de la mateixa manera
Podeu fer el mateix tipus d'estil a les columnes de les vostres taules. Per fer-ho, simplement canvieu el tr en la vostra classe CSS a td. Per exemple:
td: n-de-tipus (imparell) {
color de fons: #ccc;
}
Ús de fórmules en un selector nth of type (n)
La sintaxi d'una fórmula utilitzada en el selector és a + b.
a és un número que representa el cicle o la mida de l'índex.
n és en realitat la lletra "n" i representa un comptador, que té una puntuació de 0.
+ és un operador, que també pot ser "-"
b és un enter i representa el valor de compensació, per exemple, quantes files baixen si el selector comença a aplicar el color de fons. Això es requereix si un operador està inclòs a la fórmula.
Per exemple, si voleu establir un color de fons per cada 3a fila, la seva fórmula seria 3n + 0. El vostre CSS podria tenir aquest aspecte:
tr: nth-of-type (3n + 0) {
fons: slategray;
}
Eines útils per utilitzar el selector nth-of-type
Si us sentiu una mica incondicional per l'aspecte de la fórmula d'utilitzar el selector de pseudo-classe nth-of-type, proveu el lloc: nth Tester com una eina útil que us pot ajudar a definir la sintaxi per aconseguir l'aspecte que voleu. Utilitzeu el menú desplegable per seleccionar nth-of-type (també podeu experimentar amb altres pseudo-classes aquí, com ara nth-child).