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!

None of your elements have an emClass attribute, some of them do have an emClass class-name, however. — David Thomas
– David Thomas, Commented May 17, 2013 at 21:31

Syscall · Accepted Answer · 2021-04-04 11:17:39Z

4

You just need to update your class to

.pClass em.emClass {
    color: orange;
}

Check this fiddle

edited Apr 4, 2021 at 11:17

Syscall

19.8k10 gold badges44 silver badges60 bronze badges

answered May 17, 2013 at 21:32

karthikr

100k26 gold badges208 silver badges191 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dory Zidon · Accepted Answer · 2013-05-17 21:31:29Z

2

try this:

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

answered May 17, 2013 at 21:31

Dory Zidon

10.8k2 gold badges29 silver badges43 bronze badges

Comments

Syscall · Accepted Answer · 2021-04-04 11:18:03Z

2

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;}

edited Apr 4, 2021 at 11:18

Syscall

19.8k10 gold badges44 silver badges60 bronze badges

answered May 17, 2013 at 21:34

Travis J

82.5k43 gold badges213 silver badges280 bronze badges

Comments

Syscall · Accepted Answer · 2021-04-04 11:17:50Z

1

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;

}

edited Apr 4, 2021 at 11:17

Syscall

19.8k10 gold badges44 silver badges60 bronze badges

answered May 17, 2013 at 21:34

Kevin Lynch

24.7k3 gold badges38 silver badges39 bronze badges

Collectives™ on Stack Overflow

Styling HTML element with attribute inside another class

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related