Hover, focus and other states

Pseudo-classes are just another fluent call. Wrap the styles you want and FluentCss prefixes the class names.

Built-in states

Three helpers cover the common interactions. Pass an action that receives a IOnlyStyleBuilder and style the element as usual.

Utility	Generated CSS
`Hover(h => ...)`	`hover: prefix, :hover selector`
`Focus(f => ...)`	`focus: prefix, :focus selector`
`Active(a => ...)`	`active: prefix, :active selector`
`Pseudo("first-child", x => ...)`	`first-child: prefix with a matching selector`

<button class="@Css.Px(6).Py(3).RoundedMd().FontBold().CursorPointer()
                @Css.Background(Color.Blue500).Color(Color.White)
                @Css.Hover(h => h.Background(Color.Blue600))
                @Css.Active(a => a.Background(Color.Blue700))
                @Css.Focus(f => f.Ring(3, Color.Blue300).OutlineHidden())">
    Blue button
</button>

Custom pseudo-classes

Pseudo accepts any selector text. The value is trimmed of surrounding colons and then used both in the class name and in the generated selector.

Css.Pseudo("first-child", x => x.Background(Color.Slate100));

// class name: first-child:bg-slate-100
// selector:  .first-child\:bg-slate-100:first-child

Combining with a theme

Because the theme is carried by the root builder, the same pseudo action can be used inside Dark. The resulting class name reads from left to right: theme first, then the pseudo.

Dark
    .Background(Color.Slate800)
    .Hover(h => h.Background(Color.Slate700));

// class names:
// theme-dark:bg-slate-800
// theme-dark:hover:bg-slate-700

<button class="@Css.Px(6).Py(3).RoundedMd().FontBold().CursorPointer()
                @Css.Background(Color.Slate200).Color(Color.Slate800)
                @Css.Hover(h => h.Background(Color.Slate300))
                @Dark.Background(Color.Slate800).Color(Color.Slate100)
                @Dark.Hover(h => h.Background(Color.Slate700))">
    Theme aware button
</button>

Styles only inside a state

The builder passed to Hover, Focus and Active intentionally exposes utilities but no nested states. Combine a pseudo with a responsive or theme variant from the outside instead.

Continue with Responsive design or jump to Dark mode.