NTH-Test: Aprende fácilmente como utilizar CSS nth-child y nth-of-type

Nth-test

En la versión número 3 de CSS se introdujo una característica increíblemente útil: la posibilidad de seleccionar determinados elementos hijos de un elemento padre en común, es decir, si tienes una lista desorganizada <ul> con varios items <li> ahora puedes seleccionas alguno de ellos o definir una sumatoria para seleccionarlos, por ejemplo, los items pares o impares, o cada 3 items.

A pesar de la excelente especificación que tiene siempre es un poco complicado comprender perfectamente como funciona, el ejemplo más claro es con las listas pero prácticamente se puede aplicar a cualquier listado de etiquetas que sean hijas de otra.

Si deseas aprender mejor como funciona este pseudo-selector te recomiendo NTH-Test, una pequeña aplicación web para que compruebes visualmente y de manera rápida lo que estás seleccionando actualmente cuando utilizas este selector.

NTH-TEST