Is there a syntax to resolve ambiguity in CSS class names between two style sheets?

Question

Let's say I have an HTML page that imports two style sheets like so:

<link href="Styles1.css" rel="stylesheet" type="text/css" />
<link href="Styles2.css" rel="stylesheet" type="text/css" />

Also assume that a class with the same name appears in both of the above style sheets.

.SomeStyle {font-weight:bold;  } /* in Styles1.css */
.SomeStyle {font-weight:normal;} /* in Styles2.css */

Question: Is there a syntax where I can apply the class to an element in a way that disambiguates which version of the style to use?

For example (pseudo-code):

<span id="mySpan" class="Styles1.css:SomeStyle">Example</span>

Disclaimer: I know that a better solution would be to resolve name conflict between the two style sheets, but I am asking mostly for academic reasons.

Answer 1

Is there a syntax where I can apply the class to an element in a way that disambiguates which version of the style to use?

No. The latter style overrides the former into one computed style. There is no way to undo that.

The only thing you could do is attach additional classes to each definition:

.SomeStyle.First {font-weight:bold;  } /* in Styles1.css */
.SomeStyle.Second {font-weight:normal;} /* in Styles2.css */

and then use

<span id="mySpan" class="SomeStyle Second">Example</span>