.package { border: var(--border); border-radius: var(--border-radius); background: var(--color-bg-900); padding: var(--spacing-grid) 0; display: flex; justify-content: space-between; align-items: center; position: relative; } .package h3 { font-size: 1rem; padding: 0 0 var(--spacing-xs) var(--spacing-grid); } <div class="package"> <div class="package__info"> <h3>Bl4ck🎁Gift</h3> <div class="package__tags"> <span class="tag tag--left tag--700">10.00 EUR</span> </div> </div> # another content here </div> Necesito cambiar el indicador CSS de background , si la etiqueta <h3> tiene Bl4ck🎁Gift como contenido específico dentro de la <div class="package__info> . Y mi pregunta es, ¿cómo puedo cambiar el fondo de la clase de package si el ¿La etiqueta <h3> tiene contenido específico? Sé cómo puedo cambiar los fondos, pero como es la primera vez que trabajo con CSS, no tengo ni idea de cómo puedo encontrar el paquete específico con el contenido Bl4ck🎁Gift dentro de la etiqueta <h3> .¿Cuál sería la mejor manera de cambiar el fondo para este paquete específico?Tampoco sé cómo puedo hacerlo con javascript.Me gustaría una solución para esto, para aprender de ella.
No estoy muy seguro de cómo puedo describir este problema, ni siquiera en mi lengua materna. Espero que todavía entiendan lo que quiero decir y lo que necesito. Siéntase libre de editar la publicación, si puede explicarlo mejor.
Puede usar JavaScript para verificar el contenido del elemento h3 y luego configurar el fondo en consecuencia.
const package = document.querySelector(".package"); const h3 = document.querySelector(".package__info h3"); if (h3.innerText === "Bl4ck🎁Gift") { package.style.background = "red"; } .package { border: var(--border); border-radius: var(--border-radius); background: var(--color-bg-900); padding: var(--spacing-grid) 0; display: flex; justify-content: space-between; align-items: center; position: relative; } .package h3 { font-size: 1rem; padding: 0 0 var(--spacing-xs) var(--spacing-grid); } <div class="package"> <div class="package__info"> <h3>Bl4ck🎁Gift</h3> <div class="package__tags"> <span class="tag tag--left tag--700">10.00 EUR</span> </div> </div> ...other content here </div>.