Skip to main content
Ecplicaicón del sistema de fórmulas
Origen Enlace
Ruslan López
  • 11.8k
  • 14
  • 44
  • 88

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>

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:

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>

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>

Origen Enlace
Ruslan López
  • 11.8k
  • 14
  • 44
  • 88

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:

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>