On this page

selector

Wrapper concept

elter pseudo elements use a wrapper format.
This avoids code redundancy and supports simple and intuitive coding.

Write & string selector and compile

You can write the selector as a wrapper by starting the string expression with &.
The string following & can be anything. And that it is follows the class name.

Pseudo-classes that require arguments, such as has, not, lang, and nth-child, are written using &.

Something.tsx

const styleAnd = elter.set({
  '& ul li': {
    fontSize: '12px',
    color: '#333',
  },
  '&::after:hover': {
    fontSize: '12px',
    color: '#333',
  },
  '&:has(> h1:is(:hover, :focus)) h2': {
    fontSize: '12px',
    color: '#333',
  },
});

Property selectors

The following pseudo-classes and pseudo-elements can be used as wrapper selectors.

types.ts

type PseudoKeys =
  | 'active'
  | 'hover'
  | 'link'
  | 'visited'
  | 'empty'
  | 'firstChild'
  | 'lastChild'
  | 'firstOfType'
  | 'lastOfType'
  | 'onlyOfType'
  | 'onlyChild'
  | 'checked'
  | 'disabled'
  | 'enabled'
  | 'focus'
  | 'inRange'
  | 'invalid'
  | 'valid'
  | 'optional'
  | 'outOfRange'
  | 'readOnly'
  | 'readWrite'
  | 'required'
  | 'target'
  | 'after'
  | 'before'
  | 'firstLetter'
  | 'firstLine'
  | 'marker'
  | 'selection';

Pseudo hover example

Other pseudo-classes and pseudo-elements, such as before and after, can also be treated as wrappers in the same way.

Something.tsx

  const cssHover = elter.set({
    fontSize: '14px',
    color: '#333',
    hover: {
      fontSize: '16px',
      color: 'skyblue',
      fontWeight: '500'
    }
  })