CSS for Markdown, numbered headings

DEVONthink Tips
21

Can you elaborate on that? As it stands, I don’t understand the question.

No. CSS is not about “time”, it’s about “selectors”. You can do this:

h1 {
  font: Helvetica;
} 
h1::before {
  content: counter(h1) " "
  counter-increment: h1;
}
h1 {
  color: red;
}

or this

h1 {
  font: Helvetica;
  color: red;
  &::before {
     content: counter(h1) " ";
     counter-increment: h1;
  }
}

In both cases, you’ll have h1 elements in red Helvetica with the current h1 counter prepended.

This is only a rough sketch. CSS is more complicated than this: It’s about “specificity” and “order”, too. So, selectors coming later in the CSS override earlier ones with the same specificity, while those with higher specificity override those with a lower one, regardless of their position in the CSS. And another important concept is the “cascade”: Child elements inherit properties of their parents.

So, if you define h1 to be Helvetica red, h1::before will be displayed in Helvetica red as well – unless you specifically define other values for that selector.

Since CSS is not really on-topic here, I suggest discussing more details in PMs.

1 Like
22

@chrillek I updated my response. I appreciate any insights you may have. Is there an alternative to the counter-reset? I think that’s the issue.

23

This is about CSS and Markdown. How are you specifying the class in your Markdown?

1 Like
24

I’m afraid, this is way off the mark here. We’re talking about CSS and MD, not about SCSS and arbitrary HTML.
The code at the top of this thread works for MD. And no browser has been changed to make it stop working.

For general CSS questions, there are better places to ask for help, line StackOverflow etc.

25

@chrillek @BLUEFROG My apologies if I’m not providing enough background. But the CSS I’m inquiring about is for markdown. This thread is the closest place to what I’m trying to get help with. Our .scss gets compiled into CSS and combines with the base of our content, in this case, which is markdown. I stripped out the exact contents because of NDA restrictions to show how the markdown is laid out.

26

Your “Next post” to “Dark Mode” is missing here.
Just saying.

27

Tx, fixed