Skip to main content

User Select

Set the ability for users to select text in an element.

View as Markdown
baselinelimited
ClassCSS
us:auser-select: all;
us:autouser-select: auto;
us:noneuser-select: none;
us:tuser-select: text;

Variants

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

Breakpoints

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

@xs:us:noneFrom 32rem up.
@sm:us:noneFrom 40rem up.
@md:us:noneFrom 48rem up.
@lg:us:noneFrom 64rem up.
@xl:us:noneFrom 80rem up.
@xxl:us:noneFrom 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:us:noneContainer from 32rem up.
@c:sm:us:noneContainer from 40rem up.
@c:md:us:noneContainer from 48rem up.
@c:lg:us:noneContainer from 64rem up.
@c:xl:us:noneContainer from 80rem up.
@c:xxl:us:noneContainer 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:us:noneOn a touch screen.
@prm:us:noneWith reduced motion on.
@st:us:noneOn the first frame.

States

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

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

Pseudo Elements

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

a::us:noneOn ::after.
b::us:noneOn ::before.
p::us:noneOn ::placeholder.
s::us:noneOn ::selection.