CODEWITHSUNDEEP
csscss-selectorsampersand
K--
K--

Reputation: 734

Understanding CSS syntax, & + &

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?

Upvotes: 9

Views: 13048

Answers (1)

Denys Séguret
Denys Séguret

Reputation: 382344

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

Upvotes: 20

Related Questions