is there any differenc between these two selectors in Styled-components? ">" vs "&"

Question

greater than sign(>) refers to the direct parent.

ampersand sign(&) also does refer to its parent.

const Container = styled.div`
  > p{
    color:red;
  }
`

above equals to this ㄱ

const Container = styled.div`
  & p{
    color:red;
  }
`

both versions will make the p tag, which is the direct child of Container, have a red font color....

is that wrong? if so, how are they different?

it's the same as css selectors, the `& p` variant will select all children. while `> p` will select only direct children. see [css question](https://stackoverflow.com/questions/2636379/what-is-the-difference-between-and-a-space-in-css-selectors) for additional details — Lars, Jun 18 '22 at 14:22

score 0 · Answer 1 · answered Jun 18 '22 at 14:22

0

"parent > p" will apply only to paragraphs that are direct children of parent, while "&" will apply to all paragraphs located inside its parent, no meter the level. Putting "& p {}" is equal to putting "parent p {}".

answered Jun 18 '22 at 14:22

Max Tuzenko

1,051
6
18

is there any differenc between these two selectors in Styled-components? ">" vs "&"

1 Answers1