Tengo un componente de acordeón reutilizable, pero lo que estoy tratando de lograr es que el primer acordeón tenga un juego de relleno mayor, en comparación con los demás. ¿Se puede lograr esto a través de CSS? Si no, ¿cuál es la mejor manera de lograr esto a través de jQuery/JS?
Nota: no puedo simplemente agregar una clase a la primera sección, como dije, es un componente reutilizable, por lo que el marcado es siempre el mismo.
<!-- Apply padding to this section only --> <section class="accordion-wrapper"> <p>Some content in here</p> </section> <section class="accordion-wrapper"> <p>Some content in here</p> </section> <section class="accordion-wrapper"> <p>Some content in here</p> </section> <section class="accordion-wrapper"> <p>Some content in here</p> </section>Actualización: el primero del niño no funcionará y he actualizado la respuesta
Puede lograrlo de esta manera mediante una solución alternativa con CSS puro: seleccione cada elemento de la clase que sea hermano de la misma clase -> inviértalo, -> seleccione la clase nuevamente.
Código abierto en funcionamiento: https://codepen.io/tusharg09/pen/oNoOxrq
:not(.accordion-wrapper ~ .accordion-wrapper).accordion-wrapper { color: red; } <section class="accordion-wrapper"> <p>Some content in here</p> </section> <section class="accordion-wrapper"> <p>Some content in here</p> </section> <section class="accordion-wrapper"> <p>Some content in here</p> </section> <section class="accordion-wrapper"> <p>Some content in here</p> </section>Suponiendo que las secciones de acordeón son los únicos elementos secundarios de algún elemento principal, se puede hacer a través de css. Puede usar la pseudo clase first-child :
.accordion-wrapper:first-child { ... }Si bien en los casos simples puede usar solo CSS, para una solución general que funcione independientemente de la estructura HTML, necesita usar un poco de JS.
Este fragmento encuentra la primera aparición del elemento con esa clase en todo el documento. Luego le agrega otra clase que establece el relleno.
<!doctype html> <html> <head> <style> .accordion-wrapper.extra { padding: 10px; } </style> </head> <body> <!-- Apply padding to this section only --> <section class="accordion-wrapper"> <p>Some content in here</p> </section> <section class="accordion-wrapper"> <p>Some content in here</p> </section> <section class="accordion-wrapper"> <p>Some content in here</p> </section> <section class="accordion-wrapper"> <p>Some content in here</p> </section> <script> const first = document.querySelector('.accordion-wrapper'); first.classList.add('extra'); </script> </body> </html>ACTUALIZACIÓN: desde que di la respuesta anterior, he visto la estructura HTML para esta pregunta específica y eso se puede resolver con CSS solo usando:
main section:first-of-typecomo seleccionador. Solo tenga en cuenta que si la estructura cambia, es posible que no sea correcta, ya que, de hecho, la primera respuesta puede no serlo si se colocan otras secciones similares arriba de main.
Quizás sea más seguro combinar los dos enfoques y en el JS seleccionar la primera sección dentro de main. Depende del caso de uso real, por supuesto.