64

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;
}
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
code-gijoe
  • 6,949
  • 14
  • 67
  • 103

5 Answers5

94

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:

Yogesh Umesh Vaity
  • 41,009
  • 21
  • 145
  • 105
Jobin
  • 6,506
  • 5
  • 24
  • 26
  • 2
    Thanks! I checked 4 online guides to CSS selectors and Eric Meyer's "CSS Pocket Reference" and could not find this distinction in any of them. – John Pankowicz Oct 06 '19 at 17:14
51

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.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 2
    To quickly check whether a style sheet has syntax errors, http://jigsaw.w3.org/css-validator/ is very handy. The error handling rules are defined in the spec at http://www.w3.org/TR/CSS21/syndata.html#parsing-errors and in this case they imply that the entire rule is ignored (but other parts of the style sheet are not affected). – Jukka K. Korpela Oct 10 '12 at 06:21
  • @BoltClock, in CSS, I think you can also have a dot in-between something like div.ui-datepicker. How will you explain it? – Jogi Feb 22 '16 at 14:33
21

. 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, targets all the elements with the tag name.

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.

Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
10

. says its class

# means its an id

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

techBeginner
  • 3,792
  • 11
  • 43
  • 59
7

. 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>
André Chalella
  • 13,788
  • 10
  • 54
  • 62
Santosh Kori
  • 461
  • 4
  • 12