[CSS] emotion 사용 시 :nth-child CSS selector 경고

 

The pseudo class ":nth-child" is potentially unsafe when doing server-side rendering. Try changing it to ":nth-of-type"
가상 클래스 ":nth-child"는 서버 사이드 렌더링 수행 시 잠재적으로 안전하지 않다. ":nth-of-type"으로 변경하라

 

CSS 라이브러리로 emotion 사용 시에,

:nth-child을 사용하니 위와 같은 경고 메시지가 나타났다.

":nth-of-type"으로 변경하니 경고는 사라졌지만 이유가 무엇인지 궁금해졌다.

 

 

:nth-child와 :nth-of-type 차이

:nth-child(n)	:nth-child
부모 엘리먼트의 모든 자식 엘리먼트중 n번째	부모 엘리먼트의 특정 자식 엘리먼트중 n번째

 

 

 

https://emotion.sh/docs/ssr

Emotion - Server Side Rendering

 

@emotion/react 및 @emotion/style만 사용하는 경우 Emotion 10 이상에서 서버 사이드 렌더링이 작동된다.

서버 사이드를 통해 렌더링 된 DOM 구조는 스타일이 있는 각 엘레먼트 위에 <style> 태그를 삽입하게 된다.

const MyDiv = styled('div')({ fontSize: 12 })
<MyDiv>Text</MyDiv>



// sever side rendering
<style data-emotion-css="21cs4">
	.css-21cs4 { font-size: 12 }
</style>
<div class="css-21cs4">Text</div>

 

예시를 보면 서버 사이드의 DOM 구조는 <div> 태그 위에 사용자가 정의한 CSS 스타일이 <style>  태그로 놓이게 된다.

그러면 첫째 자식 엘레먼트가 <div> 요소가 아닌 <style>되므로, :nth-child 셀렉터가 동작하지 않게 된다.