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

css, less, twitter-bootstrap

Solution

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/

Problem

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.

Original source