Skip to main content

List Style Type

Set the marker style of a list.

View as Markdown
baselinewidely
ClassCSS
lst:clist-style-type: circle;
lst:dlist-style-type: disc;
lst:nonelist-style-type: none;
lst:slist-style-type: square;

Variants

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

Breakpoints

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

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

States

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

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

Pseudo Elements

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

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