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 element has multiple child elements of different types, the “:first-child” selector may not select the intended element.

On the other hand, the pseudo class “:first-of-type” selects the first element of its type among its sibling elements. This means that it will only select the first child element if it matches the specified type. This makes it more suitable for server-side rendering as it ensures that the intended element is selected, even if there are other child elements of different types.

Let’s consider an example to illustrate this difference:

In this case, applying the “:first-child” selector to the parent div would select the h1 element, as it is the first child regardless of its type. On the other hand, using the “:first-of-type” selector would select the h1 element because it is the first h1 element among its sibling elements.

Therefore, when doing server-side rendering, it is recommended to use the “:first-of-type” selector instead of “:first-child” to ensure that the intended element is selected based on its type among its sibling elements.