selector

Wrapper concept

TypedCSSX 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.

Something.tsx

const cssAnd = cssx.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

  active
  hover
  link
  visited
  empty
  lang
  not
  has
  hasChild
  hasPlus
  firstChild
  lastChild
  nthChild
  nthLastChild
  nthLastOfType
  nthOfType
  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 = cssx.set({
    fontSize: '14px',
    color: '#333',
    hover: {
      fontSize: '16px',
      color: 'skyblue',
      fontWeight: '500'
    }
  })

Pseudo lang example

The camel case parts are the arguments.

Something.tsx

  const cssLang = cssx.set({
    langEn: {
      color: 'skyblue',
    },
    langIt: {
      color: 'yellow',
    }
  })

Pseudo not example

Anything other than camel cased HTML tags will be considered a class name.

Something.tsx

  const cssNot = cssx.set({
    notDiv: {
      fontSize: '14px',
      color: '#333',
    },
    notHeader_main: {
      fontSize: '12px',
      color: '#444',
    }
  })

Pseudo has example

The selector for has can express a+b or a>b at most.
Also, more complex expressions can be written directly using &.

Something.tsx

const cssHas = cssx.set({
  hasDiv: {
    fontSize: '12px',
    color: '#333',
  },
  hasTapestry: {
    fontSize: '12px',
    color: '#333',
  },
  hasPlusDiv: {
    fontSize: '12px',
    color: '#333',
  },
  hasChildTapestry: {
    fontSize: '12px',
    color: '#333',
  },
  hasDivPlusTapestry: {
    fontSize: '12px',
    color: '#333',
  },
  hasTapestryPlusDiv: {
    fontSize: '12px',
    color: '#333',
  },
  hasTapestryChildDiv: {
    fontSize: '12px',
    color: '#333',
  },
  hasDivChildTapestry: {
    fontSize: '12px',
    color: '#333',
  },
});