인프런 커뮤니티 질문&답변

& 는 해당 태그 본인 자체를 뜻합니다.

즉 tag > * 에 해당 스타일을 적용하라는 의미에요.

>는 그냥 평범한 css 선택자중 하나로 자식결합 선택자입니다.

안녕하세요, mine702님.

위에 류윤종님께서 잘 답변해주셨네요~

위 코드에서 '>'는 child selector를 의미합니다.

child selector는 어떤 부모 element의 자식 element에 스타일을 적용하고 싶을 때 아래와 같이 사용합니다.

parent element > child element {

}

위 코드에서는 아래와 같이 사용했는데,

& > * {

}

여기서 '&'는 Sass에서 제공하는 parent selector를 의미합니다(아래 링크 참조).

parent selector는 말 그대로 부모 자신을 선택하기 위한 selector입니다.

https://sass-lang.com/documentation/style-rules/parent-selector

그리고 우리가 실습에 사용한 styled-components는 stylis라는 preprocessor를 사용하는데,

stylis가 스타일 중첩을 위해서 Sass(SCSS)와 유사한 형태의 문법을 지원합니다(아래 링크 참조).

https://styled-components.com/docs/basics#pseudoelements-pseudoselectors-and-nesting

그리고 이미 알고계신 것처럼 '*'는 모든 element를 선택하기 위한 universal selector입니다.

https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors

그래서 결론적으로 styled-components에서 '& > *' 라는 selector는,

해당 부모 element의 모든 자식들에게 스타일을 적용하기 위한 selector라고 보시면 됩니다.

그리고 그 안에서 다시 ':not(:last-child)'라는 selector를 이용해서 마지막 자식이 아닌 element에만 스타일을 적용하도록 한 것입니다.