I been searching but can't find a useful answer.
.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>This is basically what I would like to do. As far as I know this is not possible with pure CSS.
But it should be possible with JS, but I am not exactly sure how..
Anyone knowing how to do this?
Update: Based on the OP's clarification
You can change the parent style using JS as CSS always cascades down. To do it, simply get all the day class divs, iterate them, check the text and change the parent CSS as you want. I have used the Switch statement here. Each case represents the day div.
node.parentNode gets the parent event div of the current iterated day div and we change the style using JS.
Note: The example only shows two cases, please add more as you need.
Working Code below:
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>You can create css rules with the innerText of each .day div, and then you can add the class to the .event div depending of the innerText of its child div:
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>With Jquery it is even easier, and you can do it in-line:
$('.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>If you just need to do this with all pure javascript then this can help you or you can go with use of jquery as suggested in other answers
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;
}
}