Styling Elements with a Dot (.) in the Class Name

Styling elements with a dot (.) in the class name

.a\.b { }

However there could be browsers around that don't support this.

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.

Getting an element by its CSS class name starting with a dot

NB: This answers the original question. The question has been since edited to show code with which there doesn't appear to be any problem at all.

In general, you should avoid using special characters in class names at all. They are more trouble then they are worth.

However, if you are stuck with a class name containing a special character, you can escape it.

You also have an additional problem is that you need to prefix the class name with a . in a selector to indicate that you are using a class selector:

In your selector:

.\.x-panel-body-cssmenu

Note that since you are putting your selector in a JavaScript string literal, and \ is a special character there, you need to escape the \

".\\.x-panel-body-cssmenu"

NB: There is no such thing as a CSS class. HTML has classes, CSS has class selectors.

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 :)

Use a dot in a class name within jquery: $('.B.Avf').toggle();

You can always just use the [attr="val"] selector for this.

$('[class*="B.Avf"]')

The *= means "class contains...". Since this is looking at the attribute directly and there could be more than one class, you don't want to use =.

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

How to style elements with/without using class name

The dot is for targeting class names in CSS. .section unlike section will try to find any element that has the class name section like:

<div class="section">Some Content</div>
<section class="section">Some More Content</section>
<p class="section">Some Other Content</p>

If you want to target all section elements including the one with the class name "section-team", you can do this:

section {
   color: #000;    
}

And if you want to target just the section-team section, you can do this:

.section-team {
    color: #222;
}

Multiple dots/periods in CSS

The selector simply means select any a element having class .button AS WELL AS .gold so your anchor tag should look like

<a href="#" class="button gold">Hello</a>

Demo

The selector can be also written as element[attr~=val] as @BoltClock Commented like

a[class~="button"][class~="gold"] {
   color: #f00;
}

Demo

Generally the above(Not the selector, but calling multiple classes for a single element method) is also used when you want to apply properties of 2 classes to a single element, so say for example you have .demo having color: green; and .demo2 having font-weight: bold; so using

<p class="demo demo2">Hello, this will be green as well as bold</p>

Will make it green as well as bold. Demo 2

What is dot something followed by something without dot in CSS

It means that the styling will only be applied to the "bar" and "bam" elements that are inside of the element with the "foo" class.

<div class="foo">
  <bar>...</bar>
</div>

<div class="meal">
  <bam>...</bam>
</div>

In this example only the "bar" element will get your styling. "bam" would not get the styling since it is not withing an element with a class of "foo".

CSS stylesheet: style for one button specifically

The button is not closed properly. The CSS needs a backslash in front of the dot. 3 minutes too slow. @WOUNDEDStevenJones mentioned it in the comments.

#q1\.button1 {  width: 500px;  height: 250px;  background-image: url('images/buttons/q1.button1.jpg');}

<button name='q1.button1' id='q1.button1' onclick='incorrect()'> Cool Button </button>

Styling Elements with a Dot (.) in the Class Name