styled-components 질문

Question

& > * {         :not ( :last-child ) {             margin-bottom : 16px ;         }   }   이게 무슨 의미인지 알고싶습니다   *가 전체를 말하는건 알겠는데 &> 앞에 붙은 이것을 모르겠습니다

류윤종 · Answer

& 는 해당 태그 본인 자체를 뜻합니다. 즉 tag > * 에 해당 스타일을 적용하라는 의미에요. >는 그냥 평범한 css 선택자중 하나로 자식결합 선택자입니다.

Inje Lee (소플) · Answer

안녕하세요, 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 에만 스타일을 적용하도록 한 것입니다.