How to apply CSS to elements that have multiple classes?

Question

Is there a way to apply a style to elements that contain multiple classes?

Example

<div class="foo"     > foo     </div>
<div class="foo bar" > foo bar </div>
<div class="bar"     > bar     </div>

I only want to modify the styling of the element that contains class "foo bar". The XPath information would be something like //div[contains(@class,"foo") and contains(@class,"bar")]. Any ideas for pure CSS, w/o having to create a unique class?

aorcsik · Accepted Answer · 2011-06-10 16:02:43Z

5

Like this:

.foo { background: red; }
.bar { background: blue; }
.foo.bar { background: purple; }

answered Jun 10, 2011 at 16:02

aorcsik

15.6k5 gold badges42 silver badges50 bronze badges

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

6 Comments

Dave Over a year ago

If only it would KNOW that red and blue make purple - it could do this automagically! ;)

thirtydot Over a year ago

Probably not worth mentioning, but just in case, IE6 has some issues with this. @BoltClock explains it well here: stackoverflow.com/questions/3772290/…

melhosseiny Over a year ago

In IE6: e.c1.c2...cn = e.cn where e is an element and ci is a class with position i.

vol7ron Over a year ago

@thirtydot: If I had seen that question I probably wouldn't have wasted my time asking :) --- and I did search SO and google :) -- could you check on attribute selectors in IE6

thirtydot Over a year ago

@vol7ron: IE6 simply does not support attribute selectors, like those in your answer.

|

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

Solutions

```
 .foo.bar { ... }
```

 [class="foo bar"] { ... }             // explicit class name

 [class~="foo"][class~="bar"] { ... }  // inclusive class name

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 10, 2011 at 16:11

vol7ron

42.3k22 gold badges126 silver badges177 bronze badges

Collectives™ on Stack Overflow

How to apply CSS to elements that have multiple classes?

Example

2 Answers 2

6 Comments

Solutions

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Example

2 Answers 2

6 Comments

Solutions

Comments

Linked

Related