The Pseudo Class ":First-Child" Is Potentially Unsafe When Doing Server-Side Rendering. Try Changing It to ":First-Of-Type"

Styling with Emotion in React gives :nth-child is potentially unsafe when doing server-side rendering error

When SSR renders the components, it also renders style elements along with it. The first child of the component may be a style element and using n-th-child could potentially be unsafe as it would be unintended behaviour.

EmotionJS GitHub Issue

Why is nth-child selector not working?

The nth-child selector counts siblings (i.e., elements having the same parent).

In your HTML structure, div.social-logo is always the first, last and only child of a. So nth-child has only one element to count.

However, there are multiple anchor elements, all of which are siblings (children of #social-links), so nth-child can target each one.

#social-links a:nth-child(1) div 
#social-links a:nth-child(2) div 
#social-links a:nth-child(3) div 
              .
              .
              .

Related Topics