ClassName type describes class selector used to style element.

All strings are sanitized to prevent missuse and odd resulting selectors. It's highly recommended to avoid spaces, __ and -- in arguments though.

Construct ClassName with given namespace.

>>> import Html.Attributes exposing (class)


>>> namespace "menu" |> toClass
class "menu"

Add element

>>> import Html.Attributes exposing (class)


>>> namespace "menu"
... |> addElement "list"
... |> toClass
class "menu__list"

Convert ClassName to Html.Attribute msg.

>>> import Html.Attributes exposing (class)


>>> namespace "menu"
... |> toClass
class "menu"


>>> namespace "menu"
... |> addElement "list"
... |> toClass
class "menu__list"

Add new element and convert to Html.Attribute msg.

>>> import Html.Attributes exposing (class)


>>> namespace "menu"
... |> nested "item"
class "menu__item"


>>> namespace "menu"
... |> addElement "item"
... |> nested "link"
class "menu__item--link"

Add state to last element ClassName and convert to Html.Attrinute msg.

>>> import Html.Attributes exposing (class)


>>> namespace "menu"
... |> addElement "item"
... |> withStates ["active", "highlighted"]
class "menu__item active highlighted"


>>> namespace "menu"
... |> withStates []
class "menu"