html/css what do elements with multiple dots mean

Question

If I want multiple css classes applied, I use <div class = "c1 c2 c2">
I am looking at some code. What does <div class = "c1.c2.c3"> mean?

possible duplicate http://stackoverflow.com/questions/3447329/styling-elements-with-a-dot-in-the-class-name — phnkha, Jan 03 '13 at 02:34
The spaces mean that the div has all specific classes. The dot notation never saw before! — agim, Jan 03 '13 at 02:35

Rion Williams · Accepted Answer · 2013-01-03T02:38:07.027

The code that you have is correct, however you don't need the dots in your second <div> element (<div class='c1.c2.c3'></div>). (Unless you actually have an element that is explicitly named c1.c2.c3, which might cause some issues with CSS style declarations, unless you escape the leading slashes)

The dots are referring to CSS style rules, indicating an element has multiple classes, or in this case, classes c1, c2 and c3.

.c1.c2.c3
{
    //Styles an element that has classes c1, c2 and c3
} 

.c1.c2
{
    //Styles an element that has classes c1 and c2
}

whereas with spacing, it refines the scope:

.c1 .c2 .c3
{
    //Styles an element that has class c3 within an element c2, 
    //within an element c1.
}

Example of both cases

Thanks, so if it only has c1 and c2, they would not be applied? i.e. how is it different from spaces. — Michael Durrant, Jan 03 '13 at 02:34

score 1 · Answer 2 · answered Jan 03 '13 at 02:36

<div class = "c1.c2.c3"> means exactly what it looks like: the class name of this div element is c1.c2.c3. The CSS selector for it would look like this:

.c1\.c2\.c3 {
    // styles here
}

This is very different from the CSS selector for <div class="c1 c2 c3">, which looks like this:

.c1.c2.c3 {
    // styles here
}

html/css what do elements with multiple dots mean

2 Answers2