How to CSS target a row based upon its content, not attributes-CodePudding

I'm using software that isn't very specific in its naming/targeting. I'm trying to target a row that contains the text Interests. This works too well:

.resultsList .row:nth-child(2) {color:red;}

The red text then appears anywhere on the website that uses .resultsList. I need to specifically target result-labels that only have Interests within it like so:

<div >
<div >Interests</div>
<div >Sailing</div>
</div>

Any help? I've tried targeting using the whole class on Interests but I also turned other rows red that weren't Interests. I may be able to use plain Javascript on this but CSS would be better.

Thanks.

CodePudding user response：

I think I didn't properly understand the case, but you want to only have red text those labels that have interests, right? If it's the case, why you can't simply create a new class (for example, interest-label) and enter color: red in that? then for the tags you want, you simply add .

.resultsList .row:nth-child(2) {color:red;}

The css you wrote will apply color red to all elements of .resultsList and also to the second child of the row inside an element with class resultsList.

Would you please share more of your code and/or specify lil bit more what do you want to end with?

CodePudding user response：

In Jquery! (.result-label is your target element/s class)

$(".resultsList .result-label").css("color", "red");

In Vanilla JS!

document.querySelector(".resultsList .result-label").style.color = "red";

In CSS!

.resultsList .result-label {color:red }