Skip to main content

Cursor

Set the cursor style when hovering over an element.

View as Markdown

baselinelimited

Class	CSS
c:a	cursor: alias;
c:as	cursor: all-scroll;
c:auto	cursor: auto;
c:c	cursor: cell;
c:ch	cursor: crosshair;
c:cm	cursor: context-menu;
c:co	cursor: copy;
c:cr	cursor: col-resize;
c:d	cursor: default;
c:er	cursor: ew-resize;
c:g	cursor: grab;
c:gr	cursor: grabbing;
c:h	cursor: help;
c:m	cursor: move;
c:na	cursor: not-allowed;
c:ner	cursor: ne-resize;
c:neswr	cursor: nesw-resize;
c:none	cursor: none;
c:nr	cursor: n-resize;
c:nsr	cursor: ns-resize;
c:nwr	cursor: nw-resize;
c:nwser	cursor: nwse-resize;
c:p	cursor: pointer;
c:pr	cursor: progress;
c:rr	cursor: row-resize;
c:ser	cursor: se-resize;
c:sr	cursor: s-resize;
c:swr	cursor: sw-resize;
c:t	cursor: text;
c:vt	cursor: vertical-text;
c:w	cursor: wait;
c:wr	cursor: w-resize;
c:zi	cursor: zoom-in;
c:zo	cursor: zoom-out;

Variants

Prefix any class with a variant to apply it only under that condition. Variants stack, as in @md:h:c:none.

Breakpoints

Apply a class from a viewport width up. Each breakpoint covers its width & every width above it.

@xs:c:none	From 32rem up.
@sm:c:none	From 40rem up.
@md:c:none	From 48rem up.
@lg:c:none	From 64rem up.
@xl:c:none	From 80rem up.
@xxl:c:none	From 96rem up.

Containers

Apply a class from a container's width up, not the viewport's. Mark the parent with ct:is first.

@c:xs:c:none	Container from 32rem up.
@c:sm:c:none	Container from 40rem up.
@c:md:c:none	Container from 48rem up.
@c:lg:c:none	Container from 64rem up.
@c:xl:c:none	Container from 80rem up.
@c:xxl:c:none	Container from 96rem up.

Media

Apply a class when the device or the page matches a condition, or on the first frame an element renders.

@pc:c:none	On a touch screen.
@prm:c:none	With reduced motion on.
@st:c:none	On the first frame.

States

Apply a class only while the element is in a state, such as hovered, focused or checked.

h:c:none	On :hover.
f:c:none	On :focus.
fv:c:none	On :focus-visible.
a:c:none	On :active.
d:c:none	On :disabled.
fc:c:none	On :first-child.
c:c:none	On :checked.
e:c:none	On :empty.
fw:c:none	On :focus-within.
i:c:none	On :invalid.
in:c:none	On :indeterminate.
lc:c:none	On :last-child.
nc:c:none	On :nth-child.
r:c:none	On :required.
ro:c:none	On :read-only.
v:c:none	On :valid.

Pseudo Elements

Style a part of the element rather than the element itself, such as its placeholder or the selected text.

a::c:none	On ::after.
b::c:none	On ::before.
p::c:none	On ::placeholder.
s::c:none	On ::selection.