CSS Nesting

- WD

CSS nesting provides the ability to nest one style rule inside another, with the selector of the child rule relative to the selector of the parent rule. Similar behavior previously required a CSS pre-processor.

Chrome

  1. 4 - 108: Not supported
  2. 109 - 111: Disabled by default
  3. 112 - 119: Partial support
  4. 120 - 123: Supported
  5. 124: Supported
  6. 125 - 127: Supported

Edge

  1. 12 - 108: Not supported
  2. 109 - 111: Disabled by default
  3. 112 - 119: Partial support
  4. 120 - 122: Supported
  5. 123: Supported

Safari

  1. 3.1 - 16.4: Not supported
  2. 16.5 - 17.1: Partial support
  3. 17.2 - 17.3: Supported
  4. 17.4: Supported
  5. 17.5 - TP: Supported

Firefox

  1. 2 - 114: Not supported
  2. 115 - 116: Disabled by default
  3. 117 - 124: Supported
  4. 125: Supported
  5. 126 - 128: Supported

Opera

  1. 9 - 94: Not supported
  2. 95 - 97: Disabled by default
  3. 98 - 105: Partial support
  4. 106 - 108: Supported
  5. 109: Supported

IE

  1. 5.5 - 10: Not supported
  2. 11: Not supported

Chrome for Android

  1. 123: Supported

Safari on iOS

  1. 3.2 - 16.4: Not supported
  2. 16.5 - 17.1: Partial support
  3. 17.2 - 17.3: Supported
  4. 17.4: Supported
  5. 17.5: Supported

Samsung Internet

  1. 4 - 22: Not supported
  2. 23: Partial support
  3. 24: Partial support

Opera Mini

  1. all: Not supported

Opera Mobile

  1. 10 - 12.1: Not supported
  2. 80: Supported

UC Browser for Android

  1. 15.5: Not supported

Android Browser

  1. 2.1 - 4.4.4: Not supported
  2. 123: Supported

Firefox for Android

  1. 124: Supported

QQ Browser

  1. 14.9: Not supported

Baidu Browser

  1. 13.52: Not supported

KaiOS Browser

  1. 2.5: Not supported
  2. 3: Not supported
Resources:
Chrome support bug
Safari support bug
Firefox support bug
Blog post: CSS Nesting, specificity and you