Tengo una situación muy específica en la que tengo ~50 child-divs en los que no puedo influir directamente, es decir, no puedo agregar clases o identificadores a un child-div específico ni modificar el div a través de HTML porque se crean automáticamente. Aparecen en una cuadrícula/caja flexible simple, dos cajas una al lado de la otra. Ya alteré algunos de ellos con nth-child, pero ahora quiero agregar titulares individuales entre f.ex. división 30 y 31.
Hasta ahora, cuando quería que algunos de los campos fueran más grandes, me dirigía a uno de los child-divs directamente a través de nth-child.
Aquí está la estructura básica:
<div class="parent"> {$content} // basically <div>{$single-box-content}</div> </div>Y el CSS que uso actualmente:
.parent { width: 800px; display: flex; gap: 20px; flex-wrap: wrap; } .parent:nth-child(10) { width:800px; }Eso funcionó bastante bien. Sin embargo, ahora que quiero tener un título encima de uno de los divs (no dentro), no funciona. Cuando intento esto:
.parent:nth-child(31):before { content: "Headline"; display: block; }Aparece dentro del child-div, no encima de él. No puedo agregar un div a la parte HTML, ya que todos se crean automáticamente en el backend (es un formulario).
Me preguntaba si es posible usar JavaScript con algún element.innerHTML, pero estoy al principio de aprender JS y no pude encontrar nada (podría adaptarme) para abordar elementos secundarios específicos en JS. ¿Hay una solución de interfaz para mi problema?
Con JS puede agregar clases, ID, agregar elementos HTML al DOM y mucho más.
A continuación, se muestra cómo insertar un h2 , pero también cómo agregar una clase a un elemento de su elección. :nth-child(3) con fines ilustrativos, pero puede intercambiarlo con :nth-child(31) . El código se explica en los comentarios del fragmento.
// finding the child element with nth-child selector let selected = document.querySelector('.parent:nth-child(3)'); // giving it a class name selected.classList.add('parentClass'); // creating a h2 element let header = document.createElement("h2"); // the text inside the h2 element let headerText = document.createTextNode("headline"); // appending the text to the h2 element header.append(headerText); // giving the child a class name header.classList.add('childClass'); // appending the headline above/before the selected element selected.parentNode.insertBefore(header, selected); /* the class applied with JS */ .parentClass { background-color: red; } .childClass { background-color: limegreen; } <div class="parent">parent 1</div> <div class="parent">parent 2</div> <div class="parent">parent 3</div>