Apply CSS properties to class but only if element has another specific class

Question

I have this html:

 <li class="arrow branches"></li>
 <li class="arrow branches"></li>
 <li class="arrow branches"></li>

 <li class="arrow"></li>
 <li class="arrow"></li>
 <li class="arrow"></li>

I want to give css commands only for "arrow branches" classes,how can I give them css that wont effect the "arrow" classes?

George · Accepted Answer · 2012-12-13 14:19:19Z

4

Create the class .branches:

.branches{
    color:#f00;
}

If you want to apply it to only those elements that have branches and arrows then put them together:

.arrow.branches{
    color:#f00;
}

But if you want to apply it to more than one class thats easy too:

.branches, .otherClass{
    color:#f00;
}

edited Dec 13, 2012 at 14:19

answered Dec 13, 2012 at 14:11

George

36.9k9 gold badges70 silver badges109 bronze badges

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

2 Comments

Lrerwe Rwerew Over a year ago

but I want css to point to the arrow of the branches only,and not to effect the arrow,I also want not to approach only branches

George Over a year ago

I updated my question. The .branches and .arrow are given to the same three elements, what are you expecting to happen?

Kyle · Accepted Answer · 2012-12-13 14:11:39Z

2

It's extremely simple:

li.arrow.branches
{...styles...}

This selects LI elements with the classes branches AND arrow, but not arrow on its own.

answered Dec 13, 2012 at 14:11

Kyle

67.5k28 gold badges148 silver badges153 bronze badges

Comments

JNDPNT · Accepted Answer · 2012-12-13 14:11:32Z

0

.arrow.branches { // your css }

Works only for elements with both classes.

answered Dec 13, 2012 at 14:11

JNDPNT

7,4752 gold badges37 silver badges40 bronze badges

Collectives™ on Stack Overflow

Apply CSS properties to class but only if element has another specific class

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related