Tratando de construir un sitio web que te permita leer capítulos de un libro. Sin embargo, estoy tratando de implementar un botón Mostrar más para que la pantalla no se abarrote.

Estoy haciendo esto haciendo la pantalla: ninguno con el selector secundario css nth y luego usando javascript para obtener todos los elementos con una pantalla ninguno y haciéndolos visibles nuevamente.

Sin embargo, me di cuenta de que cuando uso el selector secundario nth para ocultar algunos elementos, javascript ahora dice que todos tienen una visualización de bloque.

 {% for chapter in chapters %} <div class="col-md-2 col-sm-12" id="chapter-list"> <div class="chapter-link-container"> <a href="{% url 'chapter-detail' chapter.manga.slug chapter.slug %}">Chapter {{chapter.number}}</a> </div> </div> {% endfor %}

 #chapter-list:nth-child(2){ display: none; }

 let listItems = document.getElementsByClassName('chapter-link-container') for(i=0; i< listItems.length; i++){ const style = getComputedStyle(listItems[i]) console.log(style.display) }

cuando registra esto, imprime el bloque 4 veces

Sin embargo, sabemos que el segundo hijo no tiene una pantalla. Ejecuté este código nuevamente, pero solo cambié el enésimo hijo a div solo para asegurarme.

 #chapter-list div{ display: none; }

y efectivamente cada pantalla era ninguna