es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Pseudo elementos CSS – Apuntar a varios elementos dentro de un solo paréntesis

30 Jul, 2023 Programación

Tengo una lista no ordenada con varios puntos de lista en HTML.
En mi CSS, quiero seleccionar los puntos de lista 5 y 7. Entonces hago:

.my-list li:nth-child(5),
.my-list li:nth-child(7){
  background: yellow;
}

Nada. Solo funciona con un solo número. Así que supongo que no puedo separarlos con una coma. ¿Con qué caracter/símbolo debo separarlos? ¿Es esto incluso posible? ¿Alguna solución alternativa? Dudo que tenga que reescribir un objetivo para cada elemento no en mi lista… Estamos casi en 2022. Solo razonando.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para dirigir varios elementos utilizando la pseudo-clase :nth-child() con números no consecutivos, debes separarlos con una n en una fórmula. Por ejemplo, para dirigir el quinto y séptimo punto de una lista, puedes utilizar el siguiente código CSS:

    .my-list li:nth-child(5n+5), .my-list li:nth-child(5n+7) {
  background: yellow;
}

    Esto dirigirá el quinto (5n+5) y séptimo (5n+7) punto de la lista, ya que la fórmula genera una secuencia de números que son múltiplos de 5, comenzando por el 5 (5n+5) y el 7 (5n+7), respectivamente.

    Alternativamente, puedes utilizar la pseudo-clase :nth-of-type() para dirigir tipos específicos de elementos dentro de un contenedor. Por ejemplo, para dirigir el quinto y séptimo elemento li, puedes utilizar el siguiente código CSS:

    .my-list li:nth-of-type(5), .my-list li:nth-of-type(7) {
  background: yellow;
}

    Esto dirigirá el quinto y séptimo elemento li dentro del contenedor con la clase .my-list.

Comments are closed.