What does the dot mean in CSS?
CssCss SelectorsCss Problem Overview
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;
}
Css Solutions
Solution 1 - Css
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:
Solution 2 - Css
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.
Solution 3 - Css
. 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.
Solution 4 - Css
. says its class
# means its an id
and if there is nothing but the selector, then it is a tag
Solution 5 - Css
. 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>