CODEWITHSUNDEEP
csscss-selectors
vol7ron
vol7ron

Reputation: 42179

How to apply CSS to elements that have multiple classes?

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?

Upvotes: 0

Views: 1232

Answers (2)

vol7ron
vol7ron

Reputation: 42179

Solutions

  1.  .foo.bar { ... }

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

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

Upvotes: 1

aorcsik
aorcsik

Reputation: 15552

Like this:

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

Upvotes: 5

Related Questions