What does '& > * + *' mean in JSX (CSS)?

Question

In material UI, there are lines of JSX in progressbar demo like this:

'& > * + *': {
      marginTop: theme.spacing(2),
    },

What does the '& > * + *' mean here?

Answer 1

That is called the lobotomized owl. It is a selector to get every element that has an immediately preceding sibling such that it will get all elements except for the first one of a parent.

ul > * + * {
  background: red;
  margin-top: 2rem;
}

<ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
</ul>

As you can see from the snippet, it will give margin-top and background to all li elements except for the first one.

It is great, for example, for adding margin between all elements but not having to do an extra style to remove margin from the first or last element.

This is purely a CSS feature and has nothing to do with React or JSX.

Read more about it here or watch the video that taught me about it here

Answer 2

it is a selector. Match all siblings.

<div class="wrapper">
    <p>1</p>
    <p>2</p>
<div>

the second p have red background.

NOTE: the first p dont match.

.wrapper {
  width: 100%;
  height: 100%;
  font-size: 16px;
  & > * + * {
    background-color: red;
  }
}

& is parent selector. > is child combinator. + is adjacent sibling combinator.