2

Si tengo esta lista de elementos, y quiero ocultar únicamente el primero, con CSS sería así:

li{
background: yellow;
border: 1px solid;
margin: 10px;
display: block;
}

li:first-child {
display: none;
}
<li><a href="#">PRIMERO</a></li>
<li><a href="#">SEGUNDO</a></li>
<li><a href="#">TERCERO</a></li>

El problema se da cuando la lista es dinámica: podrían ser 0, 1, 2 o más elementos, en mi front no tengo cómo contarlos.

li{
background: yellow;
border: 1px solid;
margin: 10px;
display: block;
}

li:first-child {
display: none;
}
<li><a href="#">UNICO</a></li>

Cómo logro con javascript crear una condicional CSS? Que solo aplique first:child si hay más de 1 elemento, sino el display sería block.

2
  • 2
    Mejor pon el javascript que usas para crear esa lista dinámica, pues lo que se me ocurre es comprobar si esa lista tiene elementos antes de agregar el primero, y si no tiene le pongo un <li></li> antes del primero que voy a agregar, y así son dos, y en cambio, si ya tiene, le quito el primero si esta vacio, pues será que lo puse yo antes... no se si me explico. Así no cambio nada del CSS.
    – masterguru
    el 29 may. 2022 a las 7:25
  • Gracias amigo, no se crean las listas desde JS, es un back que desconozco, no tengo acceso. Sólo puedo trabajar con el front y no tengo cómo saber la cantidad de elementos que el back me va a traer. muchas gracias por su comentario
    – EMCode
    el 22 jul. 2022 a las 16:55

1 respuesta 1

3

Podrías solucionarlo de la manera que el compañero @masterguru comenta. Desde Javascript comprobar si el listado a imprimir tiene más de un elemento y en caso de tenerlo, agregar una clase al primero para ocultarlo.

Pero si quisieras solucionarlo solamente a través de CSS podemos aprovecharnos de la "cascada" de CSS y de las pseudo-clases first-child y only-of-type.

Lo que he hecho ha sido primeramente ocultar los <li> que sean el primer hijo, tal y como lo tenías en tu código, para seguidamente mostrar los <li> que además no tengan ningún otro hermano que sea un <li>.

De esta manera se ocultaría el primer <li> solamente cuando tiene otros hermanos <li>, si se encuentra solo pues no se ocultaría.

li {
  background: yellow;
  border: 1px solid;
  margin: 10px;
  display: block;
}

li:first-child {
  display: none;
}

li:only-of-type {
  display: block;
}
<p>Listado con 3 elementos, queremos que se oculte el primero</p>
<ul>
  <li><a href="#">PRIMERO</a></li>
  <li><a href="#">SEGUNDO</a></li>
  <li><a href="#">TERCERO</a></li>
</ul>

<p>Listado con 1 elemento, no queremos que se oculte el primero</p>
<ul>
  <li><a href="#">PRIMERO</a></li>
</ul>

Referencias: cascada y herencia, :first-child, :only-of-type

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.