¿Cómo puedo seleccionar un elemento determinado de una lista con CSS?

Para seleccionar un elemento determinado de una lista en CSS (por ejemplo, un elemento <li> dentro de una lista <ul> o <ol>), puedes utilizar varias pseudo-clases estructurales. Estas pseudo-clases te permiten aplicar estilos a los elementos basándote en su posición o relación dentro del árbol del documento, como su orden entre hermanos.

Aquí tienes las formas más comunes de hacerlo:

1. :first-child:
   Selecciona el primer elemento hijo de su padre. Si lo aplicas a li:first-child, seleccionará el primer <li> de la lista
2. :last-child:
   Selecciona el último elemento hijo de su padre. Aplicado a li:last-child, seleccionará el último <li> de la lista.
3. :nth-child(n):
   Esta es la pseudo-clase más versátil para seleccionar elementos por su posición. n puede ser:
   • Un número entero positivo: Para seleccionar un hijo específico por su índice (empezando en 1).
   • Palabras clave odd o even: Para seleccionar los hijos impares o pares, respectivamente.
   • Una fórmula An+B: Permite seleccionar elementos en patrones más complejos (donde A y B son enteros, y n es un contador que empieza en 0).
     • li:nth-child(3n): Selecciona el 3º, 6º, 9º ítem, etc.
     • li:nth-child(n+4): Selecciona el 4º ítem y todos los siguientes.
     • li:nth-child(-n+3): Selecciona los primeros tres ítems.
4. :nth-last-child(n):
   Funciona igual que :nth-child(n), pero cuenta los elementos desde el final de la lista de hermanos hacia el principio. Por ejemplo, li:nth-last-child(1) es equivalente a li:last-child.
5. :only-child:
   Selecciona un elemento <li> (o cualquier otro) si es el único hijo de su elemento padre.

Consideración importante: :nth-of-type(n) vs. :nth-child(n)

• :nth-child(n) selecciona el n-ésimo hijo independientemente de su tipo de elemento. Si tienes una lista <ul> con <li> y, por ejemplo, un <div> mezclado entre ellos, li:nth-child(3) podría no seleccionar un <li> si el tercer hijo es en realidad ese <div>.
• :nth-of-type(n) selecciona el n-ésimo hijo de un tipo específico. Por ejemplo, li:nth-of-type(3) seleccionará el tercer elemento <li> entre sus hermanos, sin importar si hay otros tipos de elementos entre ellos. Para listas que solo contienen <li>, el resultado de :nth-child(n) y :nth-of-type(n) suele ser el mismo.