What Is The Meaning of an Ampersand in Less Selectors

What is the meaning of an ampersand in Less selectors?

Less/Sass and other pre-processors let you write the CSS code with nested rules (besides other things like variables, mixins, and so on). So you don't have to write the full path like you do in CSS. You can just nest the style.

For example, you could have a structure like:

<parent>
    <child>
        <grandchild>
        </grandchild>
    </child>
</parent>

In plain CSS, to style every element you would write:

parent { styles }
parent child { styles }
parent child grandchild { styles }

With Less (and other preprocessors like SCSS) you can do the following

parent {
    some parent styles 
    & child {
        some child styles 
        & grandchild {
             some grandchild styles
        }
    }
 &:hover { hover styles on parent }
 &:before { pseudo element styles }
}

etc.

So, the use of & can be to enable style writing for elements that are in a relationship with the parent element ( in your case the .own-space ).

btn-box , -tra , -input-identifycode-con are direct children of the own-space element, and button is child of btn-box , span is child of button, grandchild of btn-box and , grandgrandchild ( :) ) of the own-pace. Anyway, you get the ideea :)

For the specific question .own-space { &-btn-box { ... } } would mean that there is an element with class own-space-btn-box which most probably is a child of own-space but NOT necessarily ( see end of answer ). The HTML seems to be structured in a BEM style but not according to the documentation and rules. When using preprocessors for styling it is highly recommended to use the BEM naming strategy. Take a look at it.

For example, the current structure COULD look like:

_{Stack Snippets do not accept SCSS. You can check out a working example here}

.own-space {

        &-btn-box {
          margin-bottom: 10px;

          button {
            padding-left: 0;

            span {
              color: #2D8CF0;
              transition: all .2s;
            }

            span:hover {
              color: #0C25F1;
              transition: all .2s;
            }
          }
        }

        &-tra {
          width: 10px;
          height: 10px;
          transform: rotate(45deg);
          position: absolute;
          top: 50%;
          margin-top: -6px;
          left: -3px;
          box-shadow: 0 0 2px 3px rgba(0, 0, 0, .1);
          background-color: white;
          z-index: 100;
        }

        &-input-identifycode-con {
          position: absolute;
          width: 200px;
          height: 100px;
          right: -220px;
          top: 50%;
          margin-top: -50px;
          border-radius: 4px;
          box-shadow: 0 0 2px 3px rgba(0, 0, 0, .1);
        }

      }

<div class="own-space">
  The SO snippet doesn't support CSS preprocessors.
   Example purposes only 
    <div class="own-space-btn-box">
      <button>Button</button>
      <span>Some span</span>
    </div>
    <div class="own-space-tra">
       Tra tra
    </div>
    <div class="own-space-input-identifycode-con">
      identifycode
    </div>
</div>

IMPORTANT when you see styles like these in most cases the elements ARE related but keep in mind when debugging other people's code that it's not always the case. They can be unrelated, e.g.

<element class="element"> ....  </element>
<element2 class="element-element2"> ....  </element2>

The SCSS could still look like this and have the same effect

.element { 
   styles
    &-element2 {
     styles
   }
}

See example -> not related

Another example use of & would be in the case you have two elements with a common class and a specific class, e.g.

 <element class="element specific1">....</element>
 <element class="element specific2">....</element>

You can add common styles and specific styles all together like

.element { 
   /* common styles */
   &.specific1 {
     /* specific 1 styles */
   }
   &.specific2 {
     /* specific 2 styles */
   }
}

There are a lot of different uses for &. Read more:

the-sass-ampersand
Sass parent selector
LESS
BEM naming

LESS - what is the purpose of & AFTER a nested selector

The article "LESS CSS: Secrets of the Ampersand" details the difference well. I'll highlight the key uses:

Attach a class to an existing selector
Change state based on parent classes
Filter a nested selector to only match certain elements
Avoid repetition when selecting repeated elements
Simplify combinatorial explosions

The latter is my favorite. I've used it to handle some crazy IE issues. Check this out:

/**
 * Add a top border to paragraphs,
 * but remove that border when a preceding paragraph already has one.
 */
p  {
    border-top: 1px solid gray;
    & + & {
        border-top: 0;
    }
}

I think if you can wrap your mind around what this usage of & does, all the other uses become obvious.

What does an & before a pseudo element in CSS mean?

That's LESS, not CSS.

This syntax allows you to nest selector modifiers.

.clearfix { 
  &:before {
    content: '';
  }
}

Will compile to:

.clearfix:before {
  content: '';
}

With the &, the nested selectors compile to .clearfix:before.

Without it, they compile to .clearfix :before.

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

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/

What do '' and '&' mean in less.js?

Greater Than

As Harry mentioned, the greater than > sytax is the same as in regular CSS, namely that the 2nd listed element is a child of the first element.

See the table under Selectors based on relationships on this URL:

A > E: Any E element that is a child of an A element

Ampersand

The ampersand is a shortcut to reference the current parent selector, so in your first example, the pure css would end up looking like this:

  navbar-nav:hover,                                                                            
  navbar-nav:focus {                                                                           
    color: @navbar-custom-link-hover-color;                                           
  }

Here is a good article explaining the use of the ampersand character in LESS/SASS

Tutorial

While not exactly tutorial, here is the complete Language reference for LESS (linked to the section about referencing parent selectors with &)

Double ampersand in LESS

What happens when you use an ampersand in a nested rule is that the default nested structure gets ignored in the output selector and the ampersand acts as a placeholder for the complete list of outer selectors and will just insert all the parent rules all the way to the top of the hierarchy (the "path" for all nesting levels above) ... no way around that.

So using the first one - & will just join (concatenate) the nested selector to the whole list of outer selectors (appearing as if it just added it to the parent selector) and act as a combinator - see "Nested rules" at lescss.org. But then when you use the second ampersand - your selector will end up including all outer rules once again - the .wrapper and all rules in between will be added twice now. So, the behavior is not really strange. See also my answer to this question: "How to refer to two previous elements / tags / classes with LESS?" and for some more functionality of & see also seven-phases-max's comments below. Or find some examples of & being used as a "path" placeholder under "Advanced Usage of &" at lescss.org.

And to your concrete example:

I am not completely sure why you want to repeat the word "header" in the class name .header--type-small, if you are using it in addition to a class called .header ... I would just use additional classes such as .type-small, like so:

.wrapper {
    //style for the wrapper
    .heading{
        //general style for the heading
        &.type-small {
           //style for the heading with class .type-small
           font-size: 15px;
        }
        &.type-large {
           //style for the heading with class .type-large ... and so on
        }
    }
}

with output CSS:

.wrapper .heading.type-small {
  font-size: 15px;
}

but if you really really need the whole long string with the repeated names for some particular reason ... you could just do something like this:

.wrapper {
    //style for the wrapper
    .heading {
        //general style for the heading
        &.heading--type{
            &-small {
               //style for the heading with class .type-small
               font-size: 15px;
            }
        }
    }
}

with output CSS:

.wrapper .heading.heading--type-small {
    font-size: 15px;
}

SASS Ampersand – Chaining CSS class with the parent selector '&' like in LESS

It looks like you are attempting to use the LESS feature where you can change the order of the selectors by using the parent selector. It isn't working as expected because that specific LESS feature isn't implemented the same way in SASS.

If you want the equivalent output code in SASS, then you can use the @at-root directive in order to scope the selector to the root. Then you would also need to use variable interpolation (i.e., .rtl#{&}) for the parent selector:

.app {
  #page {
    .inner {
      .left {
        &.padding-left-10px {
          padding-left: 10px;

          @at-root {
            .rtl#{&} {
              padding-left: 0;
              padding-right: 10px;
            }
          }
        }
      }
    }
  }
}

Which would compile to:

.app #page .inner .left.padding-left-10px {
  padding-left: 10px;
}
.rtl.app #page .inner .left.padding-left-10px {
  padding-left: 0;
  padding-right: 10px;
}

Meaning of SASS (SCSS) plus sign and ampersand syntax ( + & ) to the right of a selector?

I found an online SASS compiler and plugged this code in and got.

.feature-title + .listing-feature__summary {
  color: #f00;
}

This ends up being a sibling selector.

https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator

What Is The Meaning of an Ampersand in Less Selectors