Color de fila alternativa de CSS
Sintaxis:
La sintaxis del selector de estilo para cambiar el color de las filas alternativas es la siguiente:
: nth-child (par o impar)Declaración de CSS;
Ejemplo #1: Cambia el color de incluso las filas
Cree el archivo HTML para hacer tablas que contengan filas y columnas y cambie el color de las filas alternativas utilizando el selector de estilo CSS. El software que utilizamos para realizar estos ejemplos es Visual Code Studio. Tenemos que generar el archivo HTML y escribir el código del HTML que usamos para crear la tabla. Puede ver el código para crear la tabla en HTML y este archivo debe guardar con el ".Extensión del archivo HTML ".
Aquí, vamos a diseñar una tabla y agregar los datos en las filas y columnas de la tabla. El "
"Con las celdas de encabezado. Luego agregamos los datos en estas celdas dentro del "
Cuando se crea esta tabla, luego diseñamos esta tabla y cambiamos el color de las filas alternativas. Para esto, vamos a diseñar el archivo CSS en este siguiente código de Visual Studio:
Código CSS:
Este código es para colorear las filas alternativas de la tabla que creamos. Este archivo se guardará con el ".Extensión del archivo de CSS ". Usaremos el archivo CSS para aplicar el selector de estilo CSS para cambiar el color alternativo de las filas.
Estilizamos la tabla utilizando la propiedad de "colapso del borde" que define si el borde de la tabla colapsa en un solo borde o está separado. Aquí, lo establecemos como "colapso". Al usar esta propiedad, tenemos un solo borde de la tabla. El ancho de esta tabla está establecido en "100%". Luego viene "th" y "td" que representan las células del encabezado y las células simples. Ahora, los diseñamos usando el "Alineado de texto" que alinea el texto dentro de las celdas con la "izquierda" a medida que lo colocamos en la "izquierda". Luego usamos el selector de estilo de CSS para cambiar el color de las filas alternativas. Aplicamos el ": nth-child ()" para que cambiará el color de las filas incluso de la mesa. Colocamos el color "verde claro" como el color de fondo de las filas pares utilizando la propiedad CSS de color de fondo.
Producción:
La salida se representa en la pantalla presionando "Alt+B" dentro del archivo HTML que anteriormente creamos. La salida muestra el color verde para todas las filas pares a medida que aplicamos el selector de estilo a las filas pares de la mesa.
Ejemplo #2: Cambia el color de las filas impares
En este ejemplo, vamos a cambiar el color de las filas extrañas de la tabla anterior que diseñamos en el primer ejemplo.
Código CSS:
El borde de la mesa se derrumba aquí, por lo que aparece como un solo borde. El ancho de la tabla es "110%". El "texto-alineamiento" se usa para la alineación del texto. Coloca el texto dentro de las celdas que queremos. Establecimos el "Alineación de texto" en el "Centro", luego el texto se coloca en el centro de la celda. El "relleno" genera el espacio entre el borde de la tabla y el contenido escrito en la tabla. Este "relleno" es "10px", por lo que se utiliza para generar un espacio "10px" entre el contenido de la tabla y el borde. Luego pasamos "extraño" al selector de estilo. Establecemos el color "rosa" como el fondo de las filas impares, y el color de las filas extrañas se convertirá en "rosa". Verifiquemos la siguiente salida:
Producción:
Aquí, vemos que el color de fondo de las filas impares se vuelve rosa porque cambiamos el color de las filas alternativas.
Ejemplo # 3: Cambie el color de las filas pares y impares
En nuestro tercer ejemplo, cambiaremos los colores de las filas pares y impares utilizando el mismo selector de estilo de CSS que también utilizamos en los ejemplos anteriores. Pero aquí, usaremos pares y impares en la mesa individual.
Código CSS:
El ancho se selecciona como "100%". El borde está configurado para "colapsar". El relleno se selecciona como "7px". El "borde" es de color "negro", sobre "2px" en ancho, y el tipo de borde creado es "sólido". Primero, establecemos el color de fondo de fila como "rosa", pero cuando usamos el selector de estilo, el color de las filas cambiará. Aplicamos el selector de estilo al número "impar" de filas. Esto cambiará el color de las filas extrañas en nuestra mesa. Queremos cambiar el color de fondo de las filas impares a azul claro, por lo que usamos la propiedad de "color de fondo" proporcionada por el CSS y establecer el "color" en "azul claro". Luego, también cambiamos el color de las "pares" a "verde amarillo". Usamos el mismo selector de estilo nuevamente y esta vez lo usamos para cambiar el color de las filas incluso. poniendo el color "amarillo-verde" para incluso filas.
Producción:
En esta salida, las filas alternativas muestran diferentes colores. Las filas impares son azul claro y las filas pares son amarillas-verde. Esta es la forma de cambiar el color de las filas alternativas utilizando el selector de estilo CSS.
Conclusión
Esta guía explicó el concepto de cambiar los colores de la fila alternativa utilizando el selector CSS NTH-Child (). Explicamos cómo funciona con el número impar de filas y también con el número par de filas y cómo cambia el color utilizando la propiedad del color de fondo. En esta guía, utilizamos el selector nth-child () y aplicamos diferentes colores a las filas alternativas, y explicamos cada código en detalle. Proporcionamos el HTML, así como el código CSS, junto con su salida respectiva.