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?

Answer 1

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

Answer 2

<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
}