How to fix this error when i using :first-child in emotion

user_17321705 0
Viewed 742

I am using Emotion in react.

My elements:

<div class="parent">
    <span class="one">1</span>
    <div class="two">2</div>
    <span class="three">3</span>
    <div class="four">4</div>
</div>

.parent {
    & > *:not(:first-child) {
        color: red;
    }
}

It has an error from Emotion:

The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type".

However, it was clear that even replacing :first-child with :first-of-type would not achieve the result I wanted

emotion typescript reactjs
1 Answers

Have you considered changing all span to div or vice versa?

As suggested by the name, :first-of-type only search for elements with the same type. Since you are mixing div and span, obviously it won't work.

BTW, unless you are doing SSR (e.g. using Next or Gatsby), you can safely ignore that warning.

user_105790130
Related