What do two dots in a CSS declaration mean?

What do two dots in a CSS declaration mean?

This is a bit of code from Twitter Bootstrap
.navbar .nav.pull-right .dropdown-menu,
.navbar .nav .dropdown-menu.pull-right {
left: auto;
right: 0;

So from that what does .nav.pull-right mean? (note that there are two dots)
I have searched here because I assumed it was some kind of selector but I couldn’t find it.


Solution 1:

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>

as well as

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

Solution 2:

That means an element with both classes nav and pull-right.

Solution 3:

The selector looks for any element with the class nav that also has a class of pull-right:

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

As a side note, the order doesn’t matter both in the selector and in the class attribute.

Related:  bootstrap carousel with photos: optimal image size?

Solution 4:

.nav.pull-right means match elements that have the class “nav” and the class “pull-right”.

Solution 5:

2 dots are actually matching for 2 classes(selector) simultaneously

After reading the pooled answer, I am still not very clear and do a research and come up with a thoughtful understanding after reading .container div { } and div.container { } ,which discussed the difference of dot ( this case) & space between selectors (matching for child of 1st selector).

Recall the rule of thumbs about CSS selector:

  1. space(in selector) means right selector is child of left selector
  2. dot donate a class selector
  3. Otherwise, tag selector e.g. <DIV> or <H3> or <td>

in which Rule 2 & 3 are somehow interchangable

original scenario:


Transform 1st dot class selector to tag selector (interchange rule 2 with rule 3)
become tag+dot scenario


Finally , the result are trivial , it match all ul tag with pull-right class defined

P.S. I will never confuse again , hope every reader won’t confuse it again

Related:  Hide a div in a page and make it visible only on print bootstrap 3 MVC 5

Solution 6:

This is my answer on a duplicated question. I’ve put so much effort in it that I wanted to share it with the “original” post.

It just selects elements with the classes “move” and “up”.

  width: 60px;
  height: 60px;
  background: beige;
  border: solid black;
  margin: 10px;
  text-align: center;
  line-height: 60px;
  font-family: arial;
  font-weight: bold;
  width: 5px;
  height: 60px;
  border: solid black;
  background: grey;
  clear: both;

  background: green;

//Additional knowledge
.class1 .class2{
  background: orange;
span div{
  background: purple;

.class3, .class4{
  background: brown;
<div class="separator"></div>
<div class="move">
<div class="up">
<div class="move up">
<div class="move classyclass up">
<div class="separator"></div>

<!-- Additional knowledge :) -->
<div class="class1">
<div class="class2">
<div class="class1 class2">
<div class="class1 classyclass class2">
<div class="separator"></div>
<div class="class3">
<div class="class4">
<div class="class3 class4">
<div class="class3 classyclass class4">