css selectors - What does the dot mean in CSS?

Question

Can someone explain the difference for these two CSS selectors?

.work-container . h3 {
font-size: 14px;
margin-top: 0px;
font-weight: 600;
height: 27px;
} 

What is the extra dot in the upper definition?

.work-container h3 {
font-size: 14px;
margin-top: 0px;
font-weight: 600;
height: 27px;
} 

Answer 1

Cases

• Selector start with dot

.class_name signifies class name

• Two dotted selector separated by space

.outside .inside

means element with .inside class descended from an element with class .outside

• Two dotted selector without separation

.name1.name2

means element that has both class name1 and name2 eg: class="name1 name2"

Related questions:

• What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB?
• What's the difference between CSS classes .foo.bar (without space) and .foo .bar (with space)