He estado buscando pero no puedo encontrar una respuesta útil.
.event [IF CHILD 'day' CONTAINS 'mon'] {background-color:blue;} .event [IF CHILD 'day' CONTAINS 'thu'] {background-color:red;} .event [IF CHILD 'day' CONTAINS 'wed'] {background-color:green;} <div class="event"> <div class="day">mon</div> </div> <div class="event"> <div class="day">thu</div> </div> <div class="event"> <div class="day">wed</div> </div>Esto es básicamente lo que me gustaría hacer. Hasta donde yo sé, esto no es posible con CSS puro.
Pero debería ser posible con JS, pero no estoy exactamente seguro de cómo ...
¿Alguien sabe cómo hacer esto?
Actualización : basado en la aclaración del OP
Puede cambiar el estilo principal usando JS ya que CSS siempre cae en cascada. Para hacerlo, simplemente obtenga todos los divs de la clase del day , itérelos, verifique el texto y cambie el CSS principal como desee. He usado la instrucción Switch aquí. Cada case representa el day div.
node.parentNode obtiene el div del event principal del div del day iterado actual y cambiamos el estilo usando JS.
Nota: El ejemplo solo muestra dos casos, agregue más según lo necesite.
Código de trabajo a continuación:
Array.from(document.querySelectorAll("div.day")).forEach(node => { switch (node.textContent) { case 'mon': node.parentNode.style.background = 'grey'; break; case 'tue': node.parentNode.style.background = 'green'; break; default: node.parentNode.style.background = 'white'; } }) <div class="event"> <div class="day" data-attr="mon">mon</div> </div> <div class="event"> <div class="day" data-attr="tue">tue</div> </div> <div class="event"> <div class="day" data-attr="wed">wed</div> </div>Puede crear reglas css con el texto interno de cada div .day , y luego puede agregar la clase al div .event según el texto interno de su div secundario:
const eventDivs = document.querySelectorAll('.event'); for (const e of eventDivs) { const child = e.querySelector('.day') e.classList.add(`text-${child.innerText}`); } .text-mon {background-color:blue;} .text-thu {background-color:red;} .text-wed {background-color:green;} <div class="event"> <div class="day">mon</div> </div> <div class="event"> <div class="day">thu</div> </div> <div class="event"> <div class="day">wed</div> </div>Con Jquery es aún más fácil y puedes hacerlo en línea:
$('.event').each((_, e) => $(e).addClass(`text-${$(e).find('.day').text()}`)); .text-mon {background-color:blue;} .text-thu {background-color:red;} .text-wed {background-color:green;} <div class="event"> <div class="day">mon</div> </div> <div class="event"> <div class="day">thu</div> </div> <div class="event"> <div class="day">wed</div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>Si solo necesita hacer esto con javascript puro, entonces esto puede ayudarlo o puede usar jquery como se sugiere en otras respuestas
let allDivs = document.querySelectorAll("[class^=event]") for (let i = 0; i < allDivs.length; i++) { let text = allDivs[i].textContent.trim(); switch (text) { case 'mon': allDivs[i].style.backgroundColor = "blue"; break; case 'thu': allDivs[i].style.backgroundColor = "red"; break; case 'wed': allDivs[i].style.backgroundColor = "green"; break; } }