Styling HTML element with attribute inside another class

Question

My HTML element has an attribute and the goal is to give a certain style to this element when found inside another class.

for ex.:

<style>
em {color:#ff0000;}
.emClass {color:#ff0000;}
.pClass em {color:#ff0000;}
.pClass .emClass  {color:#ff0000;}
</style>

<p>
    Please <em>red</em> me.
</p>

<p>
    Please <em class="emClass">red</em> me.
</p>

<p class="pClass">
    Please <em>red</em> me.
</p>

<p class="pClass">
    Please <span class="emClass">red</span> me.
</p>

<p class="pClass">
    Please <em class="emClass">orange</em> me.
</p>

the goal is to have the text in Orange only in case:

• it is emphasized text
• AND has the "emClass" attribute
• AND it is inside another element (paragraph or div) that has the "pClass" attribute.

(live example: https://jsfiddle.net/Yatko/Ffkcq/ )

Thank you for your help!

Answer 1

You just need to update your class to

.pClass em.emClass {
    color: orange;
}

Check this fiddle

Answer 2

try this:

.pClass em.emClass {color: #ffff00;}