Pseudo selectors#

style props allow you to specify certain pseudo selectors. This allows you to add adhoc styling for particular interactions.

The available pseudo selectors you can use are:

• _hover for :hover
• _active for :active
• _hoveractive for :hover:active
• _focus for :focus
• _visited for :visited
• _disabled for :disabled

<Box
  _hover={{ backgroundColor: 'primary', color: 'white' }}
  _active={{ backgroundColor: 'primary300', color: 'white' }}
  _focus={{ outline: '2px solid blue' }}
  tabIndex="-1"
  role="button"
  backgroundColor="primaryTint"
  color="primary800"
  padding="major-2"
>
  This is a box
</Box>

Group pseudo selectors#

style props allow you to style a child when its parent has a certain pseudo class and has the role="group" attribute.

The available pseudo selectors you can use are:

• _groupHover for [role=group]:hover &
• _groupActive for [role=group]:active &
• _groupFocus for [role=group]:focus &
• _groupVisited for [role=group]:visited &
• _groupDisabled for [role=group]:disabled &

<Box
  backgroundColor="primaryTint"
  color="text400"
  padding="major-2"
  role="group"
>
  <Text _groupHover={{color: 'primary500'}}>This is a box</Text>
  <Text visibility="hidden" _groupHover={{visibility: 'visible'}}>, I am visible when my parent is hovered on</Text>
</Box>