Can someone explain the difference for these two CSS selectors? <pre class="prettyprint"><code>.work-container . h3 { font-size: 14px; margin-top: 0px; font-weight: 600; height: 27px; } </code></pre> What is the extra dot in the upper definition? <pre class="prettyprint"><code>.work-container h3 { font-size: 14px; margin-top: 0px; font-weight: 600; height: 27px; } </code></pre>

Cases <ul> <li>Selector start with dot</li> </ul> <code>.class_name</code> signifies class name <ul> <li>Two dotted selector separated by space</li> </ul> <code>.outside</code> <code>.inside</code> means element with <code>.inside</code> class descended from an element with class <code>.outside</code> <ul> <li>Two dotted selector without separation</li> </ul> <code>.name1.name2</code> means element that has both class <code>name1</code> and <code>name2</code> eg: <code>class="name1 name2"</code> Related questions: <ul> <li>What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB?</li> <li>What's the difference between CSS classes .foo.bar (without space) and .foo .bar (with space)</li> </ul>

A <code>.</code> 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 <code>.work-container > h3</code>, but missed the Shift key just as he was about to type the <code>></code> character (the child combinator). Your second selector, <code>.work-container h3</code>, simply means any <code>h3</code> that's contained within an element with a class called <code>work-container</code>.

What does the dot mean in CSS?

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

What is Dot and hash in CSS?

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.

What does the period mean in CSS?

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.

Do you need a dot in CSS?

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.

What is the use of DOT in HTML?

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

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"

What does the dot mean in CSS?

Tags:

css

css-selectors

code-gijoe

People also ask

2 Answers

Jobin

BoltClock

Recent Activity

Donate For Us