What do two dots in a CSS declaration mean?

css, css-selectors, twitter-bootstrap

Solution

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>

Problem

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.

Original source