Understanding CSS syntax, & + &

Question

I'm looking at the following selector from a .css file:

.tab {

    flex: 1 0 auto;
    height: 52px;

    & + & {
        border-left: 1px solid;
    }

}

I'm not familiar with the syntax of & + & {} - what does it mean?

Answer 1

This is not CSS but some file meant to be compiled to CSS. It's probably SCSS or Less.

In SCSS and Less, the & is just a repetition of the enclosing selector.

So

& + & {
    border-left: 1px solid;
}

would be translated as

.tab + .tab {
    border-left: 1px solid;
}

This construct is common when you need to add a border between items: you add it to the left of any items which follows another one.

introduction to the sass/less ampersand