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

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

   or

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