Special style for row, another for its descendants?

Experimenting here with definition lists (terms with definitions indented under them – as in the Pandoc DefinitionList type), and wondering about the most efficient way to:

  1. Define one style for a term row
  2. Another for its descendant definition rows

My first experiment seems to work,

// 1. @classes contains "term"
// 2. descendants of such rows
defineEditorStyleModifier(
  'term-definition',
  'Term Definition'
)
  .layer('base', row => {
    row(`.@classes contains "term"`, (_, row) => {
      row.text.color = Color.systemRed();
    })
    row(`ancestor::@classes contains "term"`, (_, row) => {
      row.text.color = Color.systemGray()
    })
  });

but I wonder if there’s a more direct way of

  1. applying one style to a matched row, and
  2. another style to to its descendants ?

Probably not quite the style I want, but just using system colors for the moment:

1 Like

I’m just getting back to work, so head a little foggy, but I think your current approach looks right to me. Would this be simpler in CSS?

1 Like