Cómo usar las reglas pares e impares de CSS para crear tablas atractivas en WordPress

Una introducción a las reglas pares e impares de CSS

El nombre de este tipo de selector CSS revela su propósito. Las reglas pares e impares le permiten apuntar a esos dos tipos de elementos en casi cualquier situación y aplicarles estilos.

Tome el ejemplo en la parte superior de esta sección: todas las columnas pares comparten el mismo color de texto, mientras que los números impares usan uno diferente. Ese efecto es posible porque usamos selectores pares e impares para apuntar a cada tipo de elemento y aplicarles colores de fondo únicos.

En este momento, probablemente tenga curiosidad acerca de cuáles podrían ser las aplicaciones para selectores tan específicos, así que analicemos con ejemplos:

• Tablas de precios.  Las mejores tablas de precios usan colores para llamar la atención hacia los planes en los que quieren que te registres. En este caso, puede usar selectores pares e impares para resaltar planes específicos.
• Para hacer que los conjuntos de datos extendidos sean más legibles.  Imagina que estás tratando de dar sentido a una larga tabla llena de datos. Con un poco de CSS, puede aplicar reglas de pares e impares para crear un contraste entre las filas o columnas para que las cosas sean más legibles.
• Para resaltar elementos específicos dentro de una lista.  Si incluye una lista larga en un artículo, las reglas pares e impares pueden ser útiles para resaltar entradas particulares. En lugar de jugar con los colores de fondo, puede poner en negrita elementos específicos, cambiar el tamaño de fuente y más.

Para ser justos, las reglas pares e impares de CSS no son algo que se vea a menudo en la naturaleza. Sin embargo, son fáciles de aplicar, por lo que no hay razón por la que no deban ser parte de su arsenal. ¡Hablemos de cómo ponerlos en práctica!

Cómo funcionan las reglas pares e impares de CSS en la práctica

Las tablas son el caso de uso más común para las reglas pares e impares de CSS porque son elementos con límites visuales claros. Además, las tablas suelen estar formadas por varios elementos, lo que las convierte en las candidatas perfectas para los selectores en cuestión.

Aquí hay un ejemplo de una mesa rápida y sucia con un estilo mínimo aplicado. Es fácil de leer y obtiene la información que necesita transmitir, pero eso es todo:

Si quisiéramos aplicarle reglas pares e impares, aquí hay un ejemplo de cómo se vería el CSS:

Aquí,  tr  se refiere a los elementos HTML para cada fila de su tabla. El código anterior establecerá fondos blancos para todas las filas pares y grises para los números impares, así:

En este ejemplo, la celda verde en la esquina de la imagen simplemente está resaltada.

También puede apuntar a columnas en lugar de filas, lo que resulta útil al resaltar planes únicos en las tablas de precios. Aquí está el mismo código que antes, solo que con columnas en lugar de filas:

Así es como se vería el resultado:

Como mencionamos anteriormente, puede usar reglas pares e impares para apuntar básicamente a cualquier elemento. La clave es que debe contener subelementos, como filas o columnas; de lo contrario, el selector no sabría a cuáles apuntar. Las listas, por ejemplo, incluyen  elementos li  HTML para cada entrada. Aquí hay un ejemplo:

En este caso, desea que sus selectores pares e impares apunten  específicamente a los elementos li  , por lo que su CSS debería verse así:

Por supuesto, agregar colores de fondo a los elementos de la lista no es una práctica común, por lo que probablemente desee utilizar otros tipos de personalizaciones. Por ejemplo, puede poner en negrita los elementos impares de su lista para que se destaquen:

• Primer elemento.
• Segundo elemento.
• Tercer elemento.
• Cuarto elemento.

Como puede ver, no hay trucos para usar selectores pares e impares. Todo lo que necesita es apuntar a los elementos correctos, y puede implementar cualquier cambio que desee sin afectar el resto de su página.

Cómo replicar reglas CSS pares e impares usando Divi

Si es usuario de Divi, el sistema de módulos le permite agregar elementos sofisticados como formularios de contacto , tablas de precios, galerías y más a cualquiera de sus páginas con unos pocos clics. Además, obtienes acceso a potentes funciones de personalización para personalizar esos elementos.

Cuando se trata de tablas de precios, por ejemplo, es muy fácil replicar los efectos de las reglas pares e impares de CSS sin usar ningún código gracias a Divi. Aquí hay un ejemplo de una tabla de precios básica que preparamos con Divi Builder :

Ahora, digamos que quisiéramos aplicar diferentes colores para cada columna, para agregar un poco de contraste a la tabla. Usando las reglas de pares e impares de CSS, terminaríamos apuntando a columnas enteras con el mismo color, lo que se vería terrible. Con Divi, puede personalizar las secciones específicas a las que desea dirigirse. Intentemos agregar fondos azules a los encabezados de la primera y la tercera columna. Para hacer eso, ubique el módulo de la tabla de precios en la página que está editando y haga clic en el  botón Configuración del módulo  :

Ahora ubique la columna específica a la que desea apuntar y haga clic en su botón de configuración una vez más:

Si salta a la  pestaña Avanzado  , encontrará un campo llamado  Encabezado de precios. Puedes cambiar el color de fondo de esa sección con una simple línea de CSS:

Ahora así es como se ve nuestra tabla:

Si aplica el mismo cambio a la  columna Desarrollador  , básicamente ha implementado reglas pares e impares para esa fila en particular:

El resto de la tabla se ve bien, pero ¿y si también quisieras resaltar algunas de las características de cada plan? Eso es algo que normalmente se ve en las tablas de precios, para que los visitantes puedan comparar las funciones que ofrece cada plan. Puede  usar reglas pares e impares para las filas y escalonar las funciones  de su plan para que solo se destaquen las que desea. Con Divi, puedes replicar ese efecto con simples signos más y menos.

Para hacer esto, vaya a las secciones de configuración de la columna que desea modificar. Para este ejemplo, vamos a apuntar a la  columna Básico  una vez más. Si se desplaza hacia abajo en la pantalla de configuración principal, encontrará un editor de texto que incluye la lista de funciones que vio anteriormente:

Como puede ver, los signos más preceden a cada elemento. Si los reemplaza con signos menos, así es como se ven en la parte delantera:

Si escalona los signos más y menos, puede implementar su propio diseño par e impar. Además, puedes jugar con el editor de texto para personalizar aún más las cosas. Así es como se ve nuestra tabla después de un poco más de ajustes:

Naturalmente, querrá ser más exigente sobre qué elementos resaltar en una tabla de precios real. De esa manera, los usuarios sabrán de un vistazo exactamente qué les ofrece cada plan y cómo se compara con los demás.

Finalmente, recuerda que el  módulo Tabla de precios  te permite resaltar columnas específicas, como tablas destacadas:

Para elegir qué columnas desea resaltar, vaya a su configuración y luego salte a la  pestaña Diseño  . Encontrarás la opción justo en la parte superior.

Conclusión

CSS es fácil de aprender, pero difícil de dominar. Con un poco de paciencia, cualquiera puede crear diseños y efectos asombrosos usando el lenguaje. Incluso los elementos que no son tan llamativos, como las tablas, pueden cobrar vida usando CSS de la manera correcta, en este caso, con reglas pares e impares.

Si no eres de los que se sientan a ajustar el código hasta que las cosas se vean bien, el tema Divi te permite personalizar casi todos los aspectos de tu sitio web usando menús simples. Además, puede obtener una vista previa de sus cambios en segundos. Con tantas configuraciones de personalización, es posible replicar los efectos de las reglas pares e impares de CSS con bastante facilidad.

¿Tiene alguna pregunta sobre cómo usar Divi para replicar reglas pares e impares en WordPress? ¡Hablemos de ellos en la sección de comentarios a continuación!

Imagen en miniatura del artículo de Ket4up / shutterstock.com