stayedcss

Getting Started

Introduction Installation

Set Up

Basic Styles Styles with Use Client

Styles

Media Query Dark Mode Pseudo Classes Pseudo Elements Combinators

Community

Contribution Preview Code

Pseudo Classes

Example

To apply pseudo-classes, simply define them as properties within the style object for the class. Each pseudo-class is written as a key (e.g., ":hover") with its styles defined in an inner object.

const style = st({
  componentId: "components/docs/pseudo-classes",
  container: {
    backgroundColor: "black",
    ":hover":{
      backgroundColor: "green",         
    },
  },
});

Available Pseudo-Classes

:active

:checked

:disabled

:empty

:enabled

:first-child

:first-of-type

:focus

:focus-visible

:focus-within

:fullscreen

:has

:hover

:in-range

:indeterminate

:invalid

:is

:last-child

:last-of-type

:link

:not

:only-child

:only-of-type

:optional

:out-of-range

:picture-in-picture

:placeholder-shown

:read-only

:read-write

:required

:root

:scope

:target

:valid

:visited

:where