Pseudo-classes

Each Atomic Props of Fower supports CSS pseudo-classes. The format of the Atomic Props that enable Pseudo-classes style is: {prop}--{pseudo}, for example: bgRed400--hover, bgYellow500--active, opacity-70--disabled, w-20--visited, etc.

Hover#

Use --hover postfix to apply hover style.

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

Active#

Use --active postfix to apply active style.

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

Disabled#

Use --disabled postfix to apply disabled style.

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

Focus#

Use --focus postfix to apply focus style.

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

Child#

Use --first-child postfix to apply first-child style. Use --last-child postfix to apply last-child style.

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

Supported pseudo classes#

By default, Fower supports these pseudo classes:

  • active
  • checked
  • disabled
  • enabled
  • default
  • empty
  • focus
  • focus-within
  • invalid
  • hover
  • link
  • visited
  • first-child
  • last-child
  • after
  • before
  • placeholder
  • selection

If you want more pseudo classes, you can use setConfig to add it:

import { setConfig } from '@fower/core'
setConfig({  pseudos: ['focus-visible', 'blank'], // will merge to built-in pseudos})

About file size#

Each Atomic Props in Fower supports CSS pseudo-classes and 18 commonly used pseudo-classes. You may have questions about whether this will cause the code size of the Fower package to explode. The answer is no.

In traditional CSS, if each CSS class supports Pseudo-classes, a large amount of CSS code is required, because CSS is not programmable, and it can only accumulate code through enumeration.

Thanks to the flexibility of JS, Fower only needs dozens of lines of code to make all Atomic Props support Pseudo-classes.

Edit this page