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

The pseudo class :first-child is potentially unsafe when doing server-side rendering because it selects the first child element of its parent regardless of its type. This means that if the parent has non-element nodes like text nodes or comments as its first child, the selector will still match those nodes. This can cause unexpected results when using the selector for styling or manipulating elements.

On the other hand, the pseudo class :first-of-type selects the first child element of its parent that matches the given type. It will only match elements and ignore any non-element nodes. This makes it a safer choice for server-side rendering since it ensures that only elements are selected and avoids any unexpected behavior.

Here’s an example to illustrate the difference between :first-child and :first-of-type:

<div>
    <p>First child</p>
    <!-- Some comment -->
    <p>Second child</p>
</div>

If we apply the following CSS rules:

div :first-child {
    color: red;
}

div :first-of-type {
    color: blue;
}

:first-child will select the first child of the div, which is the <p>First child</p> element. However, it will also match the comment node before it, causing the text “First child” to be styled in red. This is unexpected and potentially unsafe when rendering on the server where we don’t have control over the content.

:first-of-type will only select the first <p> element among its siblings. In this case, it will correctly select the first <p> element with the text “First child” and color it in blue.