How would I use nesting of selectors CSS in ScalaCSS?

Question

How can I specify properties to selectors within other selectors. For example

#top {
background-color: #ccc;
padding: 1em}

#top h1 {
color: #ff0;}

#top p {
color: red;
font-weight: bold;}

How to write above CSS in ScalaCSS?

Answer 1

You could use unsafeChild: (relevant part of the doc)

object YOLO extends StyleSheet.Inline {
  import dsl._

  val top = style(
    backgroundColor(c"#ccc"),
    padding(1.em),
    unsafeChild("h1")(
      color(c"#ff0")
    ),
    unsafeChild("p")(
      color.red,
      fontWeight.bold
    )
  )
}