PseudoBox

This component is inspired by Tailwind CSS Pseudo-Class variants and Glamorous Pseudo.

PseudoBox composes Box component and provides props to style common CSS pseudo selectors.

Styling elements on hover, focus, and more can be accomplished by prefixing _ with the appropriate pseudo selector.

For example, to style &:hover, use the _hover prop and pass the style props. We use the underscore _ notation to visually separate pseudo style props from regular style props.

Usage#

Editable Example

PseudoBox includes first-class support for styling elements on hover, focus, active, disabled, visited, first-child, last-child, odd-child, even-child, focus-within, and more.

It was created to help reduce the need to pass css prop or use styled(...) function to style common pseudo states.


Hover#

Add the _hover prop to only apply style props on hover.

Editable Example

Focus#

Add the _focus prop to only apply a styles on focus.

Editable Example

Active#

Add the _active prop to only apply a styles on active.

Editable Example

Disabled#

Add the _disabled prop to style an element when it is disabled. This style will apply when the disabled or aria-disabled attribute of an element is set to true

Editable Example

Visited#

Add the _visited props to style a link that has been visited.

Unvisited LinkVisited Link
Editable Example

First Child#

Add the _first prefix to style an element when it is the first-child of its parent. This is mostly useful when elements are being generated in some kind of loop.

One
Two
Three
Editable Example

Last Child#

Add the _last prefix to style an element when it is the last-child of its parent. This is mostly useful when elements are being generated in some kind of loop.

One
Two
Three
Editable Example

Odd Child#

Add the _odd prop to style an element when it is the odd-child of its parent. This is mostly useful when elements are being generated in some kind of loop.

One
Two
Three
Editable Example

Even Child#

Add the _even prop to style an element when it is the even-child of its parent. This is mostly useful when elements are being generated in some kind of loop.

One
Two
Three
Editable Example

Group Hover#

If you need to style a child element when hovering over a specific parent element, add the role="group" attribute to the parent element, then you can use _groupHover prop to style the child element.

New Project
Create a new project from a variety of starting templates.
Editable Example

Selectors and Props#

PseudoBox can be used to style any interactive component. You can apply styles to the following selectors. The selectors are also ARIA-friendly to help you naturally use aria attributes for better accessibility.

All PseudoBox props can use the style props. Learn more about Style props

SelectorProp
&:hover_hover
&:active_active
&:focus_focus
&:before_before
&:after_after
&::placeholder_placeholder
&:first-of-type_first
&:last-of-type_last
[role=group]:hover &_groupHover
&:disabled, [aria-disabled=true]_disabled
&[readonly], &[aria-readonly=true]_readonly
&[aria-checked=true]_checked
&[aria-selected=true]_selected
&[aria-expanded=true]_expanded
&[aria-invalid=true]_invalid
&[aria-pressed=true]_pressed
&[aria-invalid=true]_invalid
&[aria-grabbed=true]_grabbed

Proudly made in 🇳🇬

Released under the MIT License.

Copyright © 2020 Segun Adebayo