What Do Two Dots in a CSS Declaration Mean

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>

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 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.

What does this css declaration mean - two declarations at once

.menu_blueSkin_Middle.dir_left div.align_left

There are three classes called here.

It's a bit complicated because whoever named these classes is an amateur. You should never name classes same as the css code.

To make it easier to understand, let's rename the three classes displayed:

• menu_blueSkin_Middle we will rename to .firstclass
  
• dir_left we will rename to .secondclass
  
• .align_left we will rename to .thirdclass
  

---

ok, now with the three renamed classes, lets show you the code:

.firstclass.secondclass div.thirdclass {
     float: left;
}

---

Ok so the following applies:

• .thirdclass is the only one being affected [with the float:left;
  code].
• Only .thirdclass classes within a div will be affected. (due to the div being located before it)
• Only .thirdclass div located within a class with double declaration of both .secondclass and .firstclass will be affected.

Example code:

<div class="firstclass secondclass">
    <p class="thirdclass">
    </p>
       <!-- NOTE: THIS IS JUST A NOTE SO YOU KNOW WHICH IS AFFECTED.
            The DIV below is the **only one affected**. The P above is NOT affected. Because it is not a DIV.
            The DIV at the bottom is NOT affected. Because it is not nested inside the firstclass secondclass 
       -->
    <div class="thirdclass">
    </div>
</div>
<div class="thirdclass">
</div>

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's the difference between CSS classes .foo.bar (without space) and .foo .bar (with space)

I think you got a slight misunderstanding what the first one means.

.element .symbol {}

Means that those CSS settings are applied to any HTML element with the class .symbol that is inside an element with the class .element.

<div class="element">
    <div class="symbol" />
</div>

In this example your first CSS entry would affect the <div> tag in the middle.

Your second example means that the first class requires two classes to be affected. Other than that it's equal to the first one.

<div class="element large">
    <div class="symbol" />
</div>

So if the HTML looks like this, the CSS values will be applied to the inner <div> tag as well.

If you want to set CSS tags that apply for multiple classes separately then you need to split them up using a comma. So it looks like this:

.element, .symbol {}

Edit: By request the link to the documentation of the CSS selectors.

What do commas and spaces in multiple classes mean in CSS?

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

That says "make all .grid_6's within .container_12's and all .grid_8's within .container_16's 460 pixels wide." So both of the following will render the same:

<div class="container_12">
  <div class="grid_6">460px Wide</div>
</div>
<div class="container_16">
  <div class="grid_8">460px Wide</div>
</div>

As for the commas, it's applying one rule to multiple classes, like this.

.blueCheese, .blueBike {
  color:blue;
}

It's functionally equivalent to:

.blueCheese { color:blue }
.blueBike { color:blue }

But cuts down on verbosity.

---

Related Topics