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


        

Answer 1

. says its class

# means its an id

and if there is nothing but the selector, then it is a tag

Answer 2

. in CSS means it is a class & it can be applied to many elements with use space between classes

For example:

<h3 class="class1 class2 class2">Heading</h3>

# in CSS means it is an ID and it can be applied to one element per page.

For example

<h3 id="idname1">Heading</h3>

Answer 3

Cases

• Selector start with dot

  .class_name signifies class name

• Two doted selector separated by space

  .outside .inside

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

• Two doted 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)

Answer 4

. in CSS means it is a class and it can be applied to many elements.

# in CSS means it is an ID and it can be applied to one element per page.

Without the either, it is a tag, targeting all the usage.

In your syntax, .work-container . h3 is actually error. The . should have been either , or as BoltClock said, >, which says the direct descendant operator in CSS.

Answer 5

A . prefix usually represents a class selector, but if it's immediately followed by whitespace then it's a syntax error.

If I were to hazard a guess, then it's likely the author meant to say .work-container > h3, but missed the Shift key just as he was about to type the > character (the child combinator).

Your second selector, .work-container h3, simply means any h3 that's contained within an element with a class called work-container.