selector

& string Selector

You can write the selector as a wrapper by starting the string expression with &.
The string following & can be anything.

style.css.ts

export 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',
  },
});

Compiled & string Selector

The characters you enter after & continue directly after the className.

css

._p6lcU ul li {
  font-size: 12px;
  color: #333;
}
._p6lcU::after:hover {
  font-size: 12px;
  color: #333;
}
._p6lcU:has(> h1:is(:hover, :focus)) h2 {
  font-size: 12px;
  color: #333;
}

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

style.ts

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

Compiled hover

css

._a6JtM {
  font-size: 14px;
  color: #333;
}
 
._a6JtM:hover {
  font-size: 16px;
  color: skyblue;
  font-weight: 500;
}

Some of you may be wondering about the "undefined" that doesn't match the CustomCSSProperty here.
Selectors such as lang and not are implemented as argument selectors and are handled in camel case, such as langEn and notDiv.

Pseudo lang example

So let's look at it the same way.

style.ts

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

Compiled lang

css

._lEQJa:lang(en) {
  color: skyblue;
}
._lEQJa:lang(it) {
  color: yellow;
}

Pseudo not example

If you connect it to notClass using camel case, the part following will become the class name as an argument.

style.ts

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

Compiled not

css

._jBLNF:not(div) {
  font-size: 14px;
  color: #333;
}
 
._jBLNF:not(.header-main) {
  font-size: 12px;
  color: #444;
}

Pseudo has example

It's a bit long, but let's look at it.

style.ts

export const cssxHas = 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',
  },
});

Compiled has

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

css

._jwLUn:has(div) {
  font-size: 12px;
  color: #333;
}
 
._jwLUn:has(.tapestry) {
  font-size: 12px;
  color: #333;
}
 
._jwLUn:has(+ div) {
  font-size: 12px;
  color: #333;
}
 
._jwLUn:has(> .tapestry) {
  font-size: 12px;
  color: #333;
}
 
._jwLUn:has(div + .tapestry) {
  font-size: 12px;
  color: #333;
}
 
._jwLUn:has(.tapestry + div) {
  font-size: 12px;
  color: #333;
}
 
._jwLUn:has(.tapestry > div) {
  font-size: 12px;
  color: #333;
}
 
._jwLUn:has(div > .tapestry) {
  font-size: 12px;
  color: #333;
}