My scenario is fairly straightforward. Below is the simplified CSS:
UPDATED FOR CLARITY:
#id2 .mycolor
{
color:white;
background-color:red;
}
#id3 .mycolor
{
color:green;
background-color:blue;
}
#id3:active
{
color:red;
background-color:white;
}
I am looking to dynamically assign these classes to other elements using:
$('some_element').addClass(???);
Naturally, I could create a new class that mirrors the existing ones and use that name. Is there a method to reuse the class currently associated with other elements or selectors without creating a new one and without causing conflicts? For instance, how can I dynamically apply the styles in #id2 .mycolor to one element and #id3 .mycolor to another element, noting they are distinct?
Furthermore, I prefer to have the styles statically defined in the file. I do not want a JavaScript solution that extracts the current styles applied to the elements as it may differ from those specified in the external CSS file. For example, querying $('#id2').css('color') might not return "white" due to various factors.