CSS first-of-type usage

I’m a css noob. I’ve managed to create (with the help of this forum) a rule that applies to all H2 headers with the following:

.cm-s-obsidian .HyperMD-header.HyperMD-header-2, .markdown-preview-view h2

Is there a way to exclude the first instance of an H2 header from this? I’ve been trying to use the “first-of-type” pseudo element to no avail.

Thanks for any help you can provide!

JB

I can not get this to work for Reading View, but Source Mode/Live Preview works with this selector: .HyperMD-header.HyperMD-header-2:not(:first-of-type)

Thanks, Olondre. That’s not working on my end… CSS seems like so much witchcraft to me! :slight_smile:

Oh woops, my mistake. I tested this in a fresh new vault but this only works if the header is the first line of the file, which makes it absolutely pointless :sweat_smile:. Sorry!

1 Like

@Deinos @Olondre my response would be a bit incomplete (bcoz I don’t have access to my pc for few days to test) but it will give the potential solution approach.

Btw first-of-type works for first of element (either H2/H3 or p or ul) but not classes and valid within same parent.

So since in LP .HyperMD-header-2 is a div, if u don’t have it as first one of the notes line it won’t be detected as first. For Reading view, almost everything is wrapped by its own container div unless it’s the very next line, so that almost cannot work.

The solution is likely to use sibling selector i.e. HyperMD-header-2 ~ HyperMD-header-2 in LP to select all H2 other than first.

For Reading View .markdown-preview-section div:has(h2) ~ div:has(h2) h2. This one, in general is the approach but it might miss something

2 Likes

This is fantastic. Thanks for your clear explanation, lots to learn here.
Your examples both work flawlessly as far as I can tell.
So @Deinos, this css snippet would for instance colour all your h2 headers except the first:

/* << ---------------- READING VIEW ---------------- >> */
.markdown-preview-section div:has(h2) ~ div:has(h2) h2 {
    color: red;
}
/* << --------- LIVE PREVIEW / SOURCE MODE --------- >> */
.HyperMD-header-2 ~ .HyperMD-header-2 {
    color: red;
}

Thanks efemkay and Olondre! The approach definitely works for the Live Preview / Source Mode, which is the real impetus for my request. The Reading Mode snippet doesn’t seem to pick up any instances of the H2 in my notes. But for my own purposes, I don’t really use RM.

I appreciate the help and the explanation. I want to up my game in css so this has been beneficial in more ways than the immediate application. Cheers!

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.