Selector rules

Nesting

Pseudo-elements(class) and media nesting rules.
Queries(media・container) can only be pseudo nest once, but pseudo cannot nest queries.

TypeScript

import * as css from '@plumeria/core';

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

error cases

Unacceptable examples:

TypeScript

import * as css from '@plumeria/core';

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

TypeScript

import * as css from '@plumeria/core';

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

Selector rules

Nesting

See more about API create

On this page