How to add ::before pseudo-class to this element

Question

Hello all you smart CSS people... I've got a Doozey!

https://tritonmedicine.com/services is the page in question

It's the title down the page a bit, next to the picture

How do I style ONLY the ::before pseudo-class/id for the "preventative care" title? I'm trying to add the word "ADULT" in front of it, but if I use the id#1506, it won't work. If I only use the class (.tab-pane.active), it puts "ADULT" in front of every active title. What am I doing wrong here?

This DOESN'T work:

#1506.tab-pane.active > div:nth-child(2) > div > h3::before {
    content: 'ADULT';
}

This DOES work (but styles them all, which I don't want):

.tab-pane.active > div:nth-child(2) > div > h3::before {
    content: 'ADULT';
}

Any assistance is much appreciated :)

Answer 1

You can't select id that start with number in CSS selectors

For more CSS-Tricks

Solution

try somthing like these tab1506 or tabPane1506 or tp1506

But there is another solution of your problem, you can use

Attribute selector:

[id="1506"].tab-pane.active > div:nth-child(2) > div > h3::before {
    content: 'ADULT';  
}

For more read here