I'm using software that isn't very specific in its naming/targeting. I'm trying to target a row that contains the label Interests. I cannot add new classes.
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 class="row">
<div class="result-label col-tn-3">Interests</div>
<div class="result-value col-tn-9">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.
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 class="interest-label".
.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?
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 }