Changing css elements of classes with the same name?

Hello,

I have an issue where I can have multiple instances of the same class being used, but only want to change something simple, like the text color, of one or more of this class, but not have the change effect ALL instances of this class.

For example, below I have two text boxes, but they share the same class of "mstrmojo-DocTextfield-valueNode" but I want to be able to change the CSS of the text values independently. So, I may want the text color of one to be RED and the other to be BLUE.

<div id="*lK36*kW32A8108F73464576B650127387B07946*x1*t1531753228999" k="W32A8108F73464576B650127387B07946" class="mstrmojo-DocTextfield hasLink" title="" style="z-index: 3; left: 0px; top: 24px; display: block; color: rgb(232, 41, 41);"> <div class="mstrmojo-DocTextfield-valueNode" style="text-align:center;padding:1.31pt;color:#444649;font:bold 10.48pt 'Arial Narrow';width:120px;" onclick="mstrmojo.dom.captureDomEvent('*lK36*kW32A8108F73464576B650127387B07946*x1*t1531753228999','click', self, event)">Google</div></div>

The closest I've come is to do something like: $('.mstrmojo-DocTextfield-valueNode').css('color', '#e82929');

The issue here is that, while this seems to work at changing the color, it changes it for every class of mstrmojo-DocTextfield-valueNode, which I don't want. This code is generated automatically within the tool I'm using and so I have no control over the class names.

Any ideas on how I can achieve different CSS effects on the text of two instances using the same class name?

Topic Participants
doofio
jakecigar

Changing css elements of classes with the same name?

Changing css elements of classes with the same name?

Topic Participants

doofio

jakecigar