CODEWITHSUNDEEP
cssclasscss-selectors
Yatko
Yatko

Reputation: 8805

Styling HTML element with attribute inside another class

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:

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

Thank you for your help!

Upvotes: 2

Views: 2324

Answers (4)

Travis J
Travis J

Reputation: 82337

JSFiddle Demo

You can prefix the class name with the element type. You should target the specific element like this:

.pClass em.emClass  {color:orange;}
.pClass span.emClass  {color:red;}

Upvotes: 2

Kevin Lynch
Kevin Lynch

Reputation: 24733

You can do this with CSS DEMO https://jsfiddle.net/kevinPHPkevin/Ffkcq/4/

em {

    color:#ff0000;

}

.emClass {

    color:#ff0000;

}

.pClass em {

    color:#ff0000;

}

.pClass .emClass {

    color:#ff0000;

}

.pClass em.emClass {

    color: #FAC802;

}

Upvotes: 1

karthikr
karthikr

Reputation: 99680

You just need to update your class to

.pClass em.emClass {
    color: orange;
}

Check this fiddle

Upvotes: 4

Dory Zidon
Dory Zidon

Reputation: 10719

try this:

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

Upvotes: 2

Related Questions