Selector rules

Nesting

Pseudo-elements(class) and media nesting rules. The following example is acceptable:

TypeScript

import { css } from '@plumeria/core';

const styles = css.create({
  list: {
    '@media (max-width: 768px)': {
      '& li': {
        listStyleType: 'none',
      },
    },
  },
});

error cases

Unacceptable examples:

TypeScript

import { css } from '@plumeria/core';

const styles = css.create({
  list: {
    '& li': {
      '@media (max-width: 768px)': {
        listStyleType: 'none',
      },
    },
  },
});

TypeScript

import { css } from '@plumeria/core';

const styles = css.create({
  list: {
    ':hover': {
      '@media (max-width: 768px)': {
        background: 'skyblue',
      },
    },
  },
});

Nesting Restrictions

Media can only be nested once with pseudo and &, but pseudo and & cannot nest media.

Selector rules

Nesting

See more about API create

On this page