Modifying the style of Frontmatter in Source Mode

Help
1

I’ve tried to search for an answer for this, and I got to a point, but now I’m stuck…

What I’m trying to do

I’m trying to format the frontmatter in source view to match with my code blocks. I’ve gotten it to a decent place (although I can’t seem to format the entries, but this is not super important to me), but I’m stuck with modifying the rounded corners. I got it working for the top with:

.markdown-source-view .cm-line:has(> .cm-hmd-frontmatter.cm-def):first-child {
    border-top-right-radius: var(--code-radius);
    border-top-left-radius: var(--code-radius);
}

Where the .cm-def is optional, but I can’t get it working for the bottom.

Things I have tried

NOTE: in the examples I’m coloring the background red, because it’s easier to see the change.

I’ve tried different kind of versions of nth-child(), nth-last-child() doesn’t select anything. The closest I’ve gotten is with:

.markdown-source-view .cm-line:has(> .cm-hmd-frontmatter.cm-def):nth-child(n) {
    background-color: var(--color-red);
}

which selects both the top and bottom row. If I use this with 1 instead of n it correctly selects the first row, but if I use 2 it selects nothing.

I can select the row with:

.markdown-source-view .cm-line:has(> .cm-hmd-frontmatter):nth-child(7) {
    background-color: var(--color-red);
}

but this is problematic, because I can have a different number of keys in the front matter, so it could be another number.

I’m so close, yet so far. So if anyone knows how I could get the desired result (it can be another approach than what I’m trying here, this is the only one I’ve gotten to even mostly working), I would love to know!

2

Ok, posting here helped, as in I figured it out right after posting :joy:

This works:

.cm-s-obsidian .cm-line:has(> .cm-hmd-frontmatter):has(> .cm-def):not(:first-child) {
    border-bottom-right-radius: var(--code-radius);
    border-bottom-left-radius: var(--code-radius);
}