How can I target a nested H1 element ONLY if it occurs after a nested element that contains a span with a specific class? [closed]

I am working on a custom stylesheet that formats Obsidian.md notes in rendered mode. I can't modify the HTML that's generated as it's created automatically by Obsidian, so my options are limited.

---

My Goal

I want to reduce the margin-top value for any H1 that comes after an image (a span with class image-embed). Basically the spacing is just too large for my taste when a H1 comes after an image. I typically insert logos as the first element in my markdown documents that deal with coding tools / frameworks / etc, and I want to reduce the spacing after the image.

Here is an image that explains what I want to do visually:

The Problem

I can't just do something like span.image-embed + h1 because the image is nested in several elements.

---

The HTML I have to work with

<!-- The Ruff Logo SVG (Nested) --> <div class="el-p"> <p dir="auto"> <span width="140" alt="Ruff Logo" src="../../00 Attachments/default.svg" class="internal-embed media-embed image-embed is-loaded" ><img alt="Ruff Logo" width="140" src="default.svg?1775838756458" /></span> </p> </div> <!-- The "Ruff Linter and Formatter" H1 (Nested) --> <div class="el-h1"> <h1 data-heading="Ruff Linter and Formatter" dir="auto"> <span class="heading-collapse-indicator collapse-indicator collapse-icon" ><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon right-triangle"> <path d="M3 8L12 17L21 8"></path></svg></span >Ruff Linter and Formatter </h1> </div>

I can't figure out how to accomplish this, and I'm wondering if it's even possible.

---

Try 1

div.el-p + div.el-h1 { margin-top: -14px !important; }

The above rule works, but it applies the margin-top adjustment to all div.el-h1 elements that come after ANY div.el-p elements whether they contain an image or not. I need a rule that will ONLY apply the margin-top adjustment if the .el-p div contains an image embed.

---

Try 2

div.el-p > p > span.image-embed + div.el-h1 { margin-top: -14px !important; } div.el-p p span.image-embed + div.el-h1 { margin-top: -14px !important; }

The above rules do NOT work. I don't think the first selector before the + allows nested elements.

---

Help Requested

If anyone can supply a CSS selector that will correctly reduce the top margin spacing of an H1 element that occurs after an image, that would be optimal. If I have to write an Obsidian plugin to handle this, I will, and any advice on how to code this would be super helpful. If there is another way to tackle this that I'm not aware of, please inform me!