Quick card mod tutorial? Anyone?

Configuration
1

Another lovely mod that makes the rabbit hole even deeper.
Too deep?

Looking for a quick conceptual explanation – have a concrete example:

      - type: markdown
        content: | [deleted]
        card_mod:
          style:
            .: |
              ha-card.type-markdown {
              font-size: 1.3rem;
              line-height: 1.5rem;
              color: gray;
              font-weight: 500;
              }
            ha-markdown.no-header$: |
              h1 {
                font-size: 3.5rem;
                margin: 20px 0px;
                padding: 10px 0px;
              }

This works wonderfully – the entire markdown card renders in accordance with the changes laid out in ha-card.type-markdown, and the h1 (actually a # within the card itself) also behaves.

I just don’t quite know why.

  1. “.:” is a bit of a mystery to me. Thought I knew my CSS selectors, but I’m baffled.
  2. I gather that $ is necessary to correctly parse the DOM with its shadow roots, but I still can’t quite wrap my head around “walking down the DOM” using ids, classes, and the mysterious $.

Any tips on how to best wrap my head around this? (Using Firefox with liberal application of F12 development tools).