Interface Pseudos

Styles for CSS Selector &:active

Used to style the active link in a navigation Styles for CSS Selector &[aria-current=page]

Used to style the current step within a process Styles for CSS Selector &[aria-current=step]

Styles for CSS selector &::after

NOTE:When using this, ensure the content is wrapped in a backtick.

Example

<Box _after={{content:`""` }}/>
Copy

Styles for CSS Selector &:-webkit-autofill

Styles for CSS selector &::before

NOTE:When using this, ensure the content is wrapped in a backtick.

Example

<Box _before={{content:`""` }}/>
Copy

Styles to apply when the ARIA attribute aria-checked is true

• CSS selector &[aria-checked=true]

Styles for when data-theme is applied to any parent of this component or element.

Styles to apply when this element is disabled. The passed styles are applied to these CSS selectors:

• &[aria-disabled=true]
• &:disabled
• &[data-disabled]
• &[disabled]

Styles for CSS selector &:empty

Styles for CSS Selector &:nth-child(even)

Styles to apply when the ARIA attribute aria-expanded is true

• CSS selector &[aria-expanded=true]

Styles for CSS Selector &:first-of-type

Styles for CSS selector &::first-letter

NOTE: This selector is only applied for block-level elements and not preceded by an image or table.

Example

<Text _firstLetter={{ textDecoration: 'underline' }}>Once upon a time</Text>
Copy

Styles for CSS selector &:focus

Styles to apply when this element has received focus via tabbing

• CSS Selector &:focus-visible

Styles to apply when a child of this element has received focus

• CSS Selector &:focus-within

Styles for CSS Selector &:fullscreen.

Styles to apply when the ARIA attribute aria-grabbed is true

• CSS selector &[aria-grabbed=true]

Styles to apply when a parent element with .group, data-group or role=group is active

Styles to apply when a parent element with .group, data-group or role=group is checked

Styles to apply when a parent element with .group, data-group or role=group is disabled

Styles to apply when a parent element with .group, data-group or role=group is focused

Styles to apply when a parent element with .group, data-group or role=group has visible focus

Styles to apply when a parent element with .group, data-group or role=group has focus within

Styles to apply when a parent element with .group, data-group or role=group is hovered

Styles to apply when a parent element with .group, data-group or role=group is invalid

Styles for CSS Selector [hidden=true]

Styles for the highlighted state.

Styles for the CSS Selector &[data-orientation=horizontal]

Styles for CSS selector &:hover

Styles to apply when the ARIA attribute aria-checked is mixed

• CSS selector &[aria-checked=mixed]

Styles to apply when the ARIA attribute aria-invalid is true

• CSS selector &[aria-invalid=true]

Styles for CSS Selector &:last-of-type

Styles for when data-theme is applied to any parent of this component or element.

Styles for CSS Selector &[aria-busy=true] or &[data-loading=true]. Useful for styling loading states

Styles for CSS Selector [dir=ltr] & It is applied when a parent element or this element has dir="ltr"

Styles for CSS Selector @media (prefers-color-scheme: dark) It is used when the user has requested the system use a light or dark color theme.

Styles for CSS Selector @media (prefers-reduced-motion: reduce) It is used when the user has requested the system to reduce the amount of animations.

Styles for CSS Selector &:not(:first-of-type)

Styles for CSS Selector &:not(:last-of-type)

Styles for CSS Selector &:nth-child(odd)

Styles to apply when a sibling element with .peer or data-peer is active

Styles to apply when a sibling element with .peer or data-peer is checked

Styles to apply when a sibling element with .peer or data-peer is disabled

Styles to apply when a sibling element with .peer or data-peer is focused

Styles to apply when a sibling element with .peeror data-peer has visible focus

Styles to apply when a sibling element with .peer or data-peer has focus within

Styles to apply when a sibling element with .peer or data-peer is hovered

Styles to apply when a sibling element with .peer or data-peer is invalid

Styles to apply when a sibling element with .peer or data-peer has placeholder shown

Styles for CSS Selector &::placeholder.

Styles for CSS Selector &:placeholder-shown.

Styles for CSS Selector &[aria-pressed=true] Typically used to style the current "pressed" state of toggle buttons

Styles for CSS Selector &:readonly

Styles for CSS Selector [dir=rtl] & It is applied when a parent element or this element has dir="rtl"

Styles to apply when the ARIA attribute aria-selected is true

• CSS selector &[aria-selected=true]

Styles for CSS Selector &::selection

Styles for the valid state

• CSS selector &[data-valid], &[data-state=valid]

Styles for the CSS Selector &[data-orientation=vertical]

Styles for CSS Selector &:visited