alt131 - 12:56 am on Jun 16, 2012 (gmt 0)
The would work provided you really did want the words <em>phasised when spoken.
I'm not sure you do, so this is starting to sound like structure being used to convey style. Ok, I know <i>, <em>, etc are presentational elements in HTML4, but that's a legacy implication best avoided for the future. If being used to convey the meaning "this word isn't english" to visual users they are taking on a structoral function, so I think useful to think about them in that way. That is reinforced in HTML5:
which is how I think it is being used here.
the i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, or a ship name in Western texts.
I'd suggest not to attack from the lower level, but as usual, from the highest possible. I'm missing information because you initially asked about classes which suggest you have classed <i>'s serving a different purpose as well. However, so far <i>'s are being used as a presentational <i>italics on elements with no other meaning, and as structoral elements when language changes to convey <i>talics to visual users and language information to others. If your content looks like this:
<p>Sentence <i>u</i>sing <i lang="de">german</i> and <i lang="fr">french</i></p>
Then the css above still works because it only selects the <i>'s with the language attribute. The attribute selector would work just as well if you prefer. No need to add any other elment to distinguish them.
Then I'd ask how many presentational <i>'s are necessary. For eg, if used as a hook to create a fancy first letter:
<p><i>S</i>entence using <i lang="de">german</i> and <i lang="fr">french</i></p>
Then you can reduce the html by deleting <i> and using p:first-letter instead.
This is fun! Any chance of seeing enough content/html to figure the patterns?