What Does the Dot Mean in CSS

What does the dot mean in 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.

CSS Dot Notation Naming Convention

A dot in css is for what is called a class.

They can be called almost anything, for example in your CSS you would create a class and add style for it (in this case, I'm making the background black);

.my-first-class {
    background-color: #000;
    ...
}

and to apply this class to an HTML element, you would do the following

<body class="my-first-class">
    ...
</body>

this would mean the body of the page would become black.

Now, you can create classes for CSS style or you can reference HTML elements directly, for example (CSS again);

body {
    background-color: #000;
}

would directly reference the <body> element on the page and do the same again.

The main difference between the two is that CSS classes are reusable. By comparison, referencing the HTML tag directly will affect all tags on the page (that are the same), for example (CSS again);

body {
    background-color: #000;
}

.my-first-class {
    background-color: #FFF;
}

and now for some HTML;

<body>
    <p class="my-first-class">This is the first line</p>
    <p class="my-first-class">This is the second line</p>
</body>

This would produce a black page, with 2 white boxes with text inside them (try it out!)

Now for your last part of the question about p.one {...} CSS.

This is a reference to a <p> tag that has class="one" added to it, <p class="one">...</p>

That CSS will only work on a <p> tag with the one class added (as above).

Extra for experts...

There is also one more selector type and it's called an ID (and I personally do not use these when doing CSS styling but some people like too and I don't know why...)

Much like a class, you can have an id on an HTML element; <p id="my-first-id"></p>

and to add CSS style to this, you would put (in the CSS);

#my-first-id {
    ...
}

and that would style all elements with that id added.

Hopefully that helped answer all the parts, ask again if you need an even better explanation :)

What the dot before a value means in CSS?

It's short-hand for 0.1em, ie. one tenth of an em. In other words, you are not limited to whole numbers (integers).

This isn't quite as useless as it seems. CSS minimizers are becoming common and would reduce this code to

.heroes li:hover {color:#607D8B;background-color:#DDD;left:.1em;}

The leading zero before .1 is just another byte that can go away.

html/css what do elements with multiple dots mean

The code that you have is correct, however you don't need the dots in your second <div> element (<div class='c1.c2.c3'></div>). (Unless you actually have an element that is explicitly named c1.c2.c3, which might cause some issues with CSS style declarations, unless you escape the leading slashes)

The dots are referring to CSS style rules, indicating an element has multiple classes, or in this case, classes c1, c2 and c3.

.c1.c2.c3
{
    //Styles an element that has classes c1, c2 and c3
} 

.c1.c2
{
    //Styles an element that has classes c1 and c2
}

whereas with spacing, it refines the scope:

.c1 .c2 .c3
{
    //Styles an element that has class c3 within an element c2, 
    //within an element c1.
}

Example of both cases

What does a dot before a variable indicate in html?

those are not variables.
Those are CSS Selectors, and they represent a HTML node with that class per example

<div class="page_title">Page Title</div>

You use CSS Selectors to style those elements in the HTML

Since they've suggested. =)

There are a few ways to reference HTML nodes in CSS, the most common are ID's, Classes and the tag name.

take a look at this example

<div>
    <ul id="first_set">
       <li class="item"> Item 1 </li>
       <li class="item"> Item 2 </li>
    </ul>
    <ul id="second_Set">
       <li class="item"> Item 1 </li>
       <li class="item"> Item 2 </li>
    </ul>
</div>

Ok. we have a div with two unordered lists, each list as two list-items, now the CSS:

div { background-color: #f00; } 
#first_set { font-weight: bold; }
#second_set { font-weight: lighter; }
.item { color: #FF00DA }

the div selector will select all <div> 's in the HTML page,
the # means ID, so #first_set it will select the object with that id in this case it will select

<ul id="first_set">

the dot symbol select classes so the .item selector will select all objects with the item class in this case it will select all

<li class="item">

This is just the basics really, you can mix these selectors to be more specific per example:

#first_set .item { text-decoration: underline; }

and it will only select the objects with class item that are inside the #first_set.

It's worth mentioning that in general, an ID (selected with #myID) should only be used ONCE on an HTML page, and a class can be used on multiple elements. Additionally, an element can have more than one class; just separate them with spaces. (e.g., <li class="item special-item">) – Platinum Azure

What do two dots in a CSS declaration mean?

The two dots indicate two classes.

I.E. It is selecting all elements with a class of nav AND pull-right
it's target HTML would look like this

<div class="nav pull-right"></div>

it doesn't necessarily mean that it's looking for a div either. It could be any element.

According to your selector in full, it would match something like these
.navbar .nav.pull-right .dropdown-menu, .navbar .nav .dropdown-menu.pull-right

<element class='navbar'>
    <element class='nav pull-right'>
        <element class='dropdown-menu'>It would match this!</element>
    </element>
</element>

as well as

<element class='navbar'>
    <element class='nav'>
        <element class='dropdown-menu pull-right'>It would also match this!</element>
    </element>
</element>

In CSS what is the difference between . and # when declaring a set of styles?

Yes, they are different...

# is an id selector, used to target a single specific element with a unique id, but . is a class selector used to target multiple elements with a particular class. To put it another way:

#foo {} will style the single element declared with an attribute id="foo"
.foo {} will style all elements with an attribute class="foo" (you can have multiple classes assigned to an element too, just separate them with spaces, e.g. class="foo bar")

Typical uses

Generally speaking, you use # for styling something you know is only going to appear once, for example, things like high level layout divs such sidebars, banner areas etc.

Classes are used where the style is repeated, e.g. say you head a special form of header for error messages, you could create a style h1.error {} which would only apply to <h1 class="error">

Specificity

Another aspect where selectors differ is in their specificity - an id selector is deemed to be more specific than class selector. This means that where styles conflict on an element, the ones defined with the more specific selector will override less specific selectors. For example, given <div id="sidebar" class="box"> any rules for #sidebar with override conflicting rules for .box

Learn more about CSS selectors

See Selectutorial for more great primers on CSS selectors - they are incredibly powerful, and if your conception is simply that "# is used for DIVs" you'd do well to read up on exactly how to use CSS more effectively.

EDIT: Looks like Selectutorial might have gone to the big website in the sky, so try this archive link instead.

What does the dot mean in the following multiple selector code

That's the class selector, it selects each p element with the class mustard. In this case it will only select those if they are a descendant of an element with the hotdog class.

What is the dot notation in the classnames?

Your css selector will apply to the next HTML elements and classes

given CSS selector

 .cupcake-table tablesour.tablesour.tablesour-cupcake > thead > tr {}

HTML elements

  <element class="cupcake-table">
      …
        <tablesour class="tablesour tablesour-cupcake">
          <thead>
            <tr>

Hope this is what you were looking for. Happy to explain or help in a better solution if needed.

What Does the Dot Mean in CSS