Menu
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; } 
653
The dot( . ) signifies a class name while the hash ( # ) signifies an element with a specific id attribute. The class will apply to any element decorated with that particular class, while the # style will only apply to the element with that particular id.
To match a specific class attribute, we always start the selector with a period, to signify that we are looking for a class value. The period is followed by the class attribute value we want to match.
So, recap: to select a html element, the css selector is without a dot, if you need to select a class, you use the dot.
The dot prefix indicates that it is a class selector and will match an HTML element which is a member of the given class. To make an element a member of a class, the class name is added to the space separated list given as the value of the class attribute.
Cases
.class_name signifies class name
.outside .inside
means element with .inside class descended from an element with class .outside
.name1.name2
means element that has both class name1 and name2 eg: class="name1 name2"
Related questions:
193
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.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
