clarify how to build a selector

[Benjmhart]

the API to construct a selector (say '.classname:hover') seems a bit muddy, can you please provide an example?

[vyorkin]

From one of my projects:

import CSS (button) as CSS
import CSS.Common (center, none)
import CSS.Cursor as Cursor
import Foo.CSS (backgroundColor', borderNone, borderRadius_, boxShadow_, outlineNone, paddingYX)
import Foo.CSS (scoped) as CSS
import Foo.CSS.Utils (className_)
import Foo.Style.Base (shadowInner, shadowSm)
import Foo.Style.Color (backgroundDark, backgroundDarker, backgroundInversed, foregroundInversed, foregroundLight, default, defaultLight, info, infoLight) as Colors
import Foo.Style.Color (darken_, lightenX, lighten_)
import Prelude (discard, ($), (<>))

stylesheet ∷ Rendered
stylesheet = render do
  className_ classNames.button ? do
    paddingYX (rem 0.5) (rem 1.0)
    display flex
    alignItems center
    justifyContent center
    borderRadius_ $ rem 0.25
    border solid (px 1.0) Colors.backgroundDarker
    outlineNone
    shadowSm
  className_ classNames.button & active ? do
    shadowInner
  className_ classNames.button & disabled ? do
    opacity 0.5
    cursor Cursor.notAllowed
  ((className_ classNames.button |> (span |+ span)) <>
   (className_ classNames.button |> (span |+ div))) ? do
    marginLeft $ rem 0.6
  className_ classNames.default ? do
    background Colors.default
    color Colors.foregroundLight
  (className_ classNames.default & hover) & enabled ? do
    background Colors.defaultLight
    borderColor $ lighten_ Colors.backgroundDarker
  className_ classNames.primary ? do
    background Colors.info
    color $ textColor Colors.info
    borderColor $ lighten_ Colors.info
  ((className_ classNames.primary & hover) & enabled <>
   (className_ classNames.primary & focus)) ? do
    background Colors.infoLight
    borderColor $ lighten_ Colors.infoLight
    color $ textColor Colors.infoLight
  className_ classNames.secondary ? do
    background Colors.backgroundDarker
    color $ textColor Colors.backgroundDarker
    borderColor $ lighten_ Colors.backgroundDarker
  (className_ classNames.secondary & hover) & enabled ? do
    background $ lighten_ Colors.backgroundDarker
    color $ textColor $ lighten_ Colors.backgroundDarker
    borderColor $ lightenX 2.0 Colors.backgroundDarker
  className_ classNames.dark ? do
    background $ lighten_ Colors.backgroundInversed
    color $ darken_ Colors.foregroundInversed
    borderColor $ lightenX 2.0 Colors.backgroundInversed
  ((className_ classNames.dark & hover) & enabled <>
   (className_ classNames.dark & focus)) ? do
    background $ lighten_ Colors.backgroundInversed
    borderColor $ lightenX 3.0 Colors.backgroundInversed
  className_ classNames.transparent ? do
    boxShadow_ none
    borderNone
    backgroundColor' "transparent"
  className_ classNames.transparent & active ? do
    boxShadow_ none
  ((className_ classNames.transparent & hover) & enabled <>
   (className_ classNames.transparent & focus)) ? do
    borderColor $ lighten_ Colors.backgroundDark
  className_ classNames.group ? do
    display flex
    alignItems center
  className_ classNames.group |> (CSS.button & firstChild) ? do
    marginRight $ px 1.0
    borderRadius (rem 0.25) nil nil (rem 0.25)
  className_ classNames.group |> CSS.button ? do
    borderRadius_ nil
    marginRight $ px 1.0
  className_ classNames.group |> (CSS.button & lastChild) ? do
    borderRadius nil (rem 0.25) (rem 0.25) nil

My className_ helper function:

className_ ∷ ∀ a. IsString a ⇒ String → a
className_ = class_ <<< ClassName

class_ ∷ ∀ a. IsString a ⇒ ClassName → a
class_ (ClassName x) = CSS.fromString $ "." <> x

Please note that some features used above are not in master yet.

[i-am-the-slime]

I still don't get it. Can you elaborate even more? There are so many operators here, that I haven't seen before |> ? and &.
Edit:
Okay actuall purescript-ide is pretty helpful with them. I'll give it another try.