Skip to main content

Clear

Set how an element behaves in relation to floating elements.

View as Markdown
baselinewidely
ClassCSS
cl:bclear: both;
cl:ieclear: inline-end;
cl:isclear: inline-start;
cl:lclear: left;
cl:noneclear: none;
cl:rclear: right;

Variants

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

Breakpoints

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

@xs:cl:lFrom 32rem up.
@sm:cl:lFrom 40rem up.
@md:cl:lFrom 48rem up.
@lg:cl:lFrom 64rem up.
@xl:cl:lFrom 80rem up.
@xxl:cl:lFrom 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:cl:lContainer from 32rem up.
@c:sm:cl:lContainer from 40rem up.
@c:md:cl:lContainer from 48rem up.
@c:lg:cl:lContainer from 64rem up.
@c:xl:cl:lContainer from 80rem up.
@c:xxl:cl:lContainer 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:cl:lOn a touch screen.
@prm:cl:lWith reduced motion on.
@st:cl:lOn the first frame.

States

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

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

Pseudo Elements

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

a::cl:lOn ::after.
b::cl:lOn ::before.
p::cl:lOn ::placeholder.
s::cl:lOn ::selection.