Skip to content

Warning about pseudo class ":nth-child" might need to be changed to ":nth-of-type" #3384

Description

@acarlstein

Current behavior:
A console log shows up due using any Emotion styles containing :nth-child or :first-child pseudo-classes

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

To reproduce:

These warnings are false positives for CSR-only applications since hydration mismatches cannot occur without SSR.

  1. Create a React app with @emotion/react that is client-side rendered only (no SSR setup)
  2. Use any Emotion styles containing :nth-child or :first-child pseudo-classes
  3. Run in development mode
  4. Observe SSR warnings in console despite not using SSR

Example code:

import { css } from '@emotion/react';

const styles = css`
  tr:first-child {
    font-weight: bold;
  }
  td:nth-child(2) {
    color: blue;
  }
`;

function MyComponent() {
  return (
    <table css={styles}>
      <tr><td>Cell 1</td><td>Cell 2</td></tr>
    </table>
  );
}

**Expected behavior:**

No warning console log like:

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


**Environment information:**

* react version: 19.2.3
* @emotion/react version: 11.14.0
* @emotion/cache version: 11.14.0
* @emotion/styled version: 11.14.1

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions