Usando: nth-of-type (n) con táboas
Para que as táboas sexan máis fáciles de ler, moitas veces é útil o estilo de filas con cores alternativas de fondo. Unha das formas máis comúns de táboas de estilo é configurar a cor de fondo de cada outra fila. Isto é moitas veces referido como "raias de cebra".
Podes lograr isto é configurando cada outra liña cunha clase CSS e logo definindo o estilo para esa clase. Isto funciona pero non é o mellor ou máis eficiente xeito de facelo.
Ao empregar este método, cada vez que precisa editar esa táboa, pode que tente editar cada fila na táboa para garantir que cada fila sexa consistente cos cambios. Por exemplo, se inseriu unha nova fila na súa táboa, todas as outras filas seguintes deberían cambiar a clase.
O CSS facilita as táboas de estilo con franxas de cebra. Non cómpre engadir ningún atributo HTML extra ou clases CSS, só usa o selector CSS de nth-of-type (n).
O selector nth-of-type (n) é unha pseudo-clase estrutural en CSS que permite elementos de estilo en función das súas relacións cos elementos primos e irmáns. Podes usalo para seleccionar un ou máis elementos segundo a súa orixe. Noutras palabras, pode combinarse con todos os elementos que sexan o neno fillo dun determinado tipo de pai.
A letra n pode ser unha palabra clave (como impar ou par), un número ou unha fórmula.
Por exemplo, ao estilo de cada etiqueta de parágrafo con cor de fondo amarela, o documento CSS incluiría:
p: nth-of-type (impar) {
fondo: amarelo;
}
Comezar coa táboa HTML
En primeiro lugar, cree a súa táboa como normalmente escribiuna en HTML. Non engadas ningunha clase especial ás filas ou columnas.
Na súa folla de estilo, engada o seguinte CSS:
tr: nth-of-type (impar) {
cor de fondo: #ccc;
}
Isto estilizará todas as outras filas cunha cor de fondo gris comezando pola primeira fila.
Columnas alternativas de estilo do mesmo xeito
Podes facer o mesmo tipo de estilo en columnas nas táboas. Para facelo, simplemente cambie o tr na súa clase CSS a td. Por exemplo:
td: nth-of-type (impar) {
cor de fondo: #ccc;
}
Usar fórmulas nun selector nth of type (n)
A sintaxe para unha fórmula usada no selector é a + b.
a é un número que representa o tamaño do ciclo ou índice.
n é en realidade a letra "n" e representa un contador, que ten un valor de 0.
+ é un operador, que tamén pode ser "-"
b é un enteiro e representa o valor de compensación, por exemplo, cantas filas se o selector comezará a aplicar a cor de fondo. Isto é necesario se un operador está incluído na fórmula.
Por exemplo, se desexa establecer unha cor de fondo por cada 3ª fila, a súa fórmula sería 3n + 0. O teu CSS podería ser así:
tr: nth-of-type (3n + 0) {
fondo: slategray;
}
Ferramentas útiles para usar o selector tipo nth
Se se sente un pouco atormentado polo aspecto da fórmula de usar o selector pseudo-clase nth-of-type, proba o sitio: nth Tester como unha ferramenta útil que pode axudarche a definir a sintaxe para conseguir o aspecto que desexas. Use o menú despregable para seleccionar nth-of-type (tamén pode experimentar con outras pseudo-clases aquí, tamén, como nth-child).