What does the character '>' and '&' mean in bootstrap less modules?

Question

I am very new to bootstrap and I would like to customize it. I am confused when I see '>' and '&' character. What does that mean? Is that present in less documentation. Is that some sort of nesting? Please see sample code below.

.navbar-nav {
    > .open > a {
      &,
      &:hover,
      &:focus {
        background-color: @navbar-inverse-link-active-bg;
        color: @navbar-inverse-link-active-color;
      }
    }

This might be the easiest question, don't hate me for this. Thanks folks.

Answer 1

In CSS, the ">" character means that only "first nested" elements will be targeted ("direct child" elements).

that means in the following scenario:

   <div id="a">
       <div id="b">
          <div id="c">
          </div>
       </div>
   </div>

then in CSS #a > div would only target <div id="b"> and NOT <div id="c">

without the > character, #a div would target both "b" and "c".

---

As for the & character in LESS:

The ampersand selector is most commonly used when applying a modifying class or pseudo-class to an existing selector:

a {
    color: blue;
    &:hover {
        color: green;
    }
}

The inner selector in this example compiles to a:hover. Without the &, it would compile to a :hover (a descendant selector that matches hovered elements inside of tags).

Read more at http://blog.slaks.net/2013-09-29/less-css-secrets-of-the-ampersand/