What do two dots in a CSS declaration mean?

Question

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


        

Answer 1

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

Answer 2

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

Answer 3

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". http://www.w3schools.com/cssref/css_selectors.asp

div{
  width: 60px;
  height: 60px;
  background: beige;
  border: solid black;
  float:left;
  margin: 10px;
  text-align: center;
  line-height: 60px;
  font-family: arial;
  font-weight: bold;
}
.separator{
  width: 5px;
  height: 60px;
  border: solid black;
  background: grey;
  clear: both;
}



.move.up{
  background: green;
}


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

.class3, .class4{
  background: brown;
}

<div class="separator"></div>
<div class="move">
  1
  </div>
<div class="up">
  2  
</div>
<div class="move up">
  3
</div>
<div class="move classyclass up">
  4
</div>
<div class="separator"></div>

<!-- Additional knowledge :) -->
<div class="class1">
  5
  </div>
<div class="class2">
  6
  </div>
<div class="class1 class2">
  7
  </div>
<div class="class1 classyclass class2">
  8
  </div>
<span>
  <div>8.1</div>
</span>
<div class="separator"></div>
<div class="class3">
  9
  </div>
<div class="class4">
  10
  </div>
<div class="class3 class4">
  11
  </div>
<div class="class3 classyclass class4">
  12
  </div>

Answer 4

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.

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

.nav.pull-right

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

ul.pull-right

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

Answer 6

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>