score:2

Accepted answer

the sign & related to css compiler, like scss. the * means all, as the sign > means direct child.

basically, it will refer to the element you are in his scopes, this case:

// element card
card: {
        maxwidth: '475px',

        // all direct children of the element card
        '& > *': {
            flexgrow: 1,
            flexbasis: '50%'
        },
}

score:1

the greater than sign (>) selector in css is used to select the element with a specific parent. it is called as element > element selector. it is also known as the child combinator selector which means that it selects only those elements which are direct children of a parent. it looks only one level down the markup structure and not further deep down. elements which are not the direct child of the specified parent is not selected.

the & character basically means “this”. here's some examples:

a { color:#ff0000; &:hover { color:#0000ff; } } will be compiled into: a { color:#ff0000; } a:hover { color:#0000ff; }

score:1 

// selects all elements where the parent is a <card> element
card: {
        '& > *': {
            flexgrow: 1,
            flexbasis: '50%'
        }
}

//this same as 

card > * {
    flex-grow: 1;
    flex-basis: 50%;
}

Related Query

More Query from same tag