Necesito aplicar algo de css en un div cuya clase de div principal cambia según una clase. Quiero aplicar algo de css en el div secundario. El div padre tiene clases como .pricing-section y .new-pricing-section . Se alternan en función de una bandera. El div principal completo es el siguiente:
const togglePriceSection = isPricingDetailsFeatureEnabled ? "new-pricing-section" : "pricing-section"; <div className={togglePriceSection}> <div className="btn btn-link btn-icon show-more-link" onClick={() => setExpanded(!expanded )}> {pricesList.length > 6 && !expanded ? "Show More" : expanded ? "Show Less" :null} </div> </div> Quiero aplicar css al div con clase btn . yo lo estaba haciendo asi:
.pricing-section, .new-pricing-section .btn.btn-link.show-more-link { text-transform: none; margin-left: auto; } El problema es que estas propiedades se aplican solo cuando el div principal tiene className=".new-pricing-section" y no cuando className=".pricing-section" . Quiero que se aplique en ambos casos. ¿Cómo arreglar esto?
La coma significa que este es un nuevo selector. En realidad tienes un error aquí, parece.
Esto se aplicará a .pricing-section y .new-pricing-section .btn.btn-link.show-more-link
.pricing-section, .new-pricing-section .btn.btn-link.show-more-link { text-transform: none; margin-left: auto; } Realmente desea aplicar a .pricing-section .btn.btn-link.show-more-link y .new-pricing-section .btn.btn-link.show-more-link
.pricing-section .btn.btn-link.show-more-link, .new-pricing-section .btn.btn-link.show-more-link { text-transform: none; margin-left: auto; } Dicho esto, puede ser más limpio separar lo new en una clase extra. Entonces tienes lo siguiente para el botón.
.pricing-section .btn.btn-link.show-more-link { text-transform: none; margin-left: auto; } Y todo lo que depende de que esta sea una new sección de precios, tiene una nueva sección pricing-section new como classList. Ese puede seleccionarlo con .pricing-section.new .
.pricing-section .btn.btn-link.show-more-link { // css if child is under pricing-section } .new-pricing-section .btn.btn-link.show-more-link { // css if child is under new-pricing-section }