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

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