54

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
  • 665,005
  • 155
  • 1,345
  • 1,328
code-gijoe
  • 6,609
  • 12
  • 62
  • 101

5 Answers5

82

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
  • 28,478
  • 14
  • 117
  • 88
Jobin
  • 5,892
  • 5
  • 22
  • 24
  • 1
    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
48

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
  • 665,005
  • 155
  • 1,345
  • 1,328
  • 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
17

. 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
  • 160,666
  • 24
  • 190
  • 242
10

. says its class

# means its an id

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

dotNETbeginner
  • 3,582
  • 9
  • 41
  • 59
6

. 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,084
  • 9
  • 51
  • 61
Santosh Kori
  • 421
  • 4
  • 11