CSS Rules that only match when 2 classes coexist

Question

I'm looking for something that only happens when 2 classes are present.

Eg:

.positive{
  color:#46a546;
}
.positive:after{
  content: "\25b2";
}
.negative{
    color:#F00;
}

.arrow:after{
  content: "\25bc";
}

<span class="positive"> hi </span>
<span class="positiveArrow"> hi </span> 
<span class="negativeArrow"> hi </span> //what i have

<span class="positive arrow"> hi </span>
<span class="negative arrow"> hi </span> // what i want

your question doesn't make sense. Please edit your question. — IT ppl, Mar 19 '13 at 17:10
1st hit for "something that only happens when 2 classes are present" is nuclear receptor :D — Alex, Mar 19 '13 at 17:10
possible duplicate: http://stackoverflow.com/questions/2554839/select-css-based-on-multiple-classes — mychalvlcek, Mar 19 '13 at 17:13

score 3 · Accepted Answer · answered Mar 19 '13 at 17:11

3

CSS:

.negative.arrow {
    /* Apply your CSS rules here */
}

.positive.arrow {
    /* Apply your CSS rules here */
}

answered Mar 19 '13 at 17:11

Devin Burke

13,392
11
53
80

CSS Rules that only match when 2 classes coexist

1 Answers1