0

no maqueto mucho y me he encontrado con cierta situación.

Tengo una serie de párrafos dentro un div. Quisiera aplicar un estilo CSS a todos los párrafos a partir de una posición determinada, por ejemplo, a partir del tercer párrafo el resto no aparecerán, es decir que el siguiente código:

<div class="prueba">
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
</div>

muestre sólo:

lorem ipsum
lorem ipsum
lorem ipsum


Nota: el número de párrafos es indeterminado, por eso no puedo hacer algo como:

p:nth-of-type(4),
p:nth-of-type(5) {
  display: none;
}
1

2 respuestas 2

3

Suponiendo que tu elemento a partir del que deseas aplicar algo sea el cuarto, debes usar el pseudo selector :nth-of-type mandandole una fórmula.

Las fórmulas se hacen de la siguiente manera:

an+b

Donde vada uno de los elementos significa:

  • n es nuestra variable, si no ponemos nada lo aplicará a todos
  • a es el cuantificador de múltiplos si ponemos por ejemplo 2n lo aplicará cada que n sea divisible exactamente entre 2
  • b es nuestro desfase. Es decir a partir de este número de elementos se empieza a aplicar el resto de la fórmula.

p:nth-of-type(n+4) {
  /* display: none;*/
   background: red;
}
<div class="prueba">
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
</div>

0

He encontrado una posible solución combinando selectores CSS:

.prueba p:nth-of-type(3) ~ p {
    display: none;
}

Primero selecciono el elemento precedente a los que llevarán el estilo, en este caso el tercer párrafo, que será el último visible dentro del div. A partir de este elemento usó el selector ~ para seleccionar el resto de elementos de tipo párrafo que restan.

Tu Respuesta

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

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