How do I select the first adjacent sibling?

It is not possible using CSS as currently defined and implemented. It would require a selector that selects an element on the basis of its siblings after it. CSS selectors can select an element on the basis of preceeding or outer elements, but not on the basis of following or inner elements.

The desired effect can be achieved using JavaScript in a rather straightforward way, and you can decide, depending on the purpose, whether you just remove the elements from display or completely remove them from the document tree.

This is now possible

li:first-of-type {
    display: none;
}

This will match the first li tag.

li:first-of-type:not(:only-of-type) {
    margin: 10px;
}

If you want a bit more control - such as adding space between two items only when there are more items the above would work. Mixing pseudo selectors can be very powerful. https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

It is possible to target first sibling with CSS, with some limitations.

For the example in the question it could be done with something like this

li.heading { display: none; }                   /* apply to all elements */
li.heading + li.heading { display: list-item }  /* override for all but first sibling */

This works, but requires that you can explicitly set the styles on the siblings to override the setting for first child.

There are a few ways to hide only the "Heading 1" only:

ul li:first-child {display:none;}

Alternatively:

li.parent{ display: none; }
li.parent + li.parent { display: list-item; }

Also, <li>Child of Heading 2</li> is not a child of <li class="parent">Heading 2</li>. It is a sibling.