'& > *' in React's styles

Question

I have following code:

const useStyles = makeStyles(theme => ({
  row: {
    '& > *': {
      fontSize: 12,
      fontWeight: 'bold',
      color: 'rgba(33,34,34,0.5)',
      letterSpacing: 0.5,
      lineHeight: '16px',
    },
  },
}));

anybody can explain me what the line does mean:

'& > *': {

Appreciate.

Answer 1

> is a child combinator in CSS

The > combinator selects nodes that are direct children of the first element.

* is a universal selector in CSS.

Selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces.

& is a parent selector in SCSS

In CSS-in-JS it may refer to the current component selector

The parent selector, &, is a special selector invented by Sass that’s used in nested selectors to refer to the outer selector

Since React-Material-UI uses JSS in its implementation, such syntax is possible.

So in a combination of all above, & > * means: apply the CSS for all element types for all current parent's direct children