Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to select an element with 2 classes [duplicate]

i have this elements

<div class="a b"></div>
<div class="b"></div>
<div class="a"></div>

I want apply to element with class a and b the color #666. How can I do this with CSS?

like image 879
Luca Romagnoli Avatar asked Feb 25 '11 10:02

Luca Romagnoli


People also ask

How do you find an element with multiple classes?

Use the getElementsByClassName method to get elements by multiple class names, e.g. document. getElementsByClassName('box green') . The method returns an array-like object containing all the elements that have all of the given class names.

Can we use two classes in same element?

Multiple classes can be applied to a single element in HTML and they can be styled using CSS.

Can an element have 2 CSS classes?

To specify multiple classes, separate the class names with a space, e.g. <span class="left important">. This allows you to combine several CSS classes for one HTML element.


2 Answers

You can chain class selectors without a space between them:

.a.b {
     color: #666;
}

Note that, if it matters to you, IE6 treats .a.b as .b, so in that browser both div.a.b and div.b will have gray text. See this answer for a comparison between proper browsers and IE6.

like image 155
BoltClock Avatar answered Oct 20 '22 19:10

BoltClock


Just chain them together:

.a.b {
  color: #666;
}
like image 45
htanata Avatar answered Oct 20 '22 18:10

htanata