css - Is there a way to make italic text within italic text non-italic? -

typically, way emphasize text within italic text make non-italic. example:

the publication of james joyce's ulysses was met great controversy.

i know can this:

em em {    font-style: normal;  }  

but won't work if parent italicized phrase doesn't use <em>. instance, won't work if have

<p class="photo-caption">the publication of james joyce's <em>ulysses</em> met great controversy.</p> 

of course, can this:

.photo-caption em {    font-style: normal;  }  

but has potential maintainability problems, since every change parent element requires change child element.

is there way tell css globally unitalicize nested italics?

the capabilities of css limited browsers can process rules quickly.

i think original approach correct, can address concerns maintainability css preprocessor, less. these tools support more advanced logic while still compiling down lean , mean css.

with less, specifically, create rule this:

@photocaptionfontstyle: italic;  /* reverses font style of child em's if parent value italic */ .reverse-em(@parentfontstyle) when (@parentfontstyle = italic){     em {         font-style: normal;     } }  .photo-caption {     font-style: @photocaptionfontstyle;      /* make child ems normal if @photocaptionfontstyle "italic" */     .reverse-em(@photocaptionfontstyle) } 

^{(for inspiration. not tested. see variables , guarded mixins)}

if @photocaptionfontstyle italic, compiled result this:

.photo-caption {     font-style: italic; } .photo-caption em {     font-style: normal; } 

if switched @photocaptionfontstyle normal, you'd end this:

.photo-caption {     font-style: normal; } /* ".photo-caption em" never generated    because of guard condition */