css: element.class.class - what does it mean?

Question

Here is a code snippet:

div.note.note_expanded

What does it mean? I understand div.className, but what is the second dot?

score 8 · Accepted Answer · answered Jun 14 '11 at 22:28

8

A div that has the class note and note_expanded at the same time

Something like <div class='note note_expanded'> would match that.

answered Jun 14 '11 at 22:28

Robert

20,680
9
53
64

Obligatory link to IE6 nonsense explained: http://stackoverflow.com/questions/3772290/css-selector-that-applies-to-elements-with-two-classes/3772305#3772305 – BoltClock Jun 14 '11 at 22:29
6

@BoltClock: I think we as developers have a responsibility to form a league of extraordinary developers mainly to go around an punch anyone who still uses that browser. – Robert Jun 14 '11 at 22:31

score 2 · Answer 2 · answered Jun 14 '11 at 22:29

2

This would target a div that has both a class of .note and a class of .note_expanded.

<div class="note note_expanded">I'm special!</div>

answered Jun 14 '11 at 22:29

Dave Kiss

10,009
11
51
75

score 1 · Answer 3 · answered Jun 14 '11 at 22:40

1

<style>
div.note.note_expanded {
  color:blue;
}
div.note {
  color:red;
}
div.note_expanded {
  color:black;
}
</style>
<div class='note note_expanded'> 
This is blue but I would think there must be an easier way.
</div>

answered Jun 14 '11 at 22:40

Wayne

4,638
1
22
24

when i remove the space from element .class {} to element.class {} mine stop working? why???? – Muhammad Umer May 06 '13 at 20:32

css: element.class.class - what does it mean?

3 Answers3