why sometimes we need space between & and . in css react

Question

&:hover{
  cursor: pointer;

  & .background-image {
    transform: scale(1.1);`enter code here`
    transition: transform 6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  & .content{
    opacity: 0.9;
  }
}"

like in & .background-image we have space

&.large{
  height: 380px;
}"

but we don't give space here

score 0 · Accepted Answer · answered Jan 16 '22 at 06:11

The & always refers to the parent selector when nesting. Think of the & as being removed and replaced with the parent selector.

If you leave a space after & symbol, this means you are now referring to its' descendants if you don't leave a space, this means you refer to your parent itself.

For example

.container {
  &.red {
     background-color: red;
  }
}

In this case, this will apply red background to the .container element, if it also has a red class attached to it in your DOM.

Example 2

.container {
  & .red {
     background-color: red;
  }
}

In this case, it will make the background to be red-colored to any child, which has a .red class inside a .container element.

More details and complex examples here

why sometimes we need space between & and . in css react

1 Answers1