Add a class to the first paragraph

[Arif]

Instead of adding class {.class} per article to the first paragraph, can it be done through the templates?

[Arif]

This worked

Implement accessible drop-cap

Oh, man. I was almost there. Eh, guess I’ll leave my attempt here anyway: {{ $firstP := `(?:^<p>((\b[a-zA-Z])([\w\-]+))((?:.|\n)+?)</p>)` }} {{ $withDropCapDom := printf "<p class=\"the-first-paragraph\"><span aria-hidden=\"true\"><span class=\"dropcap\">${2}</span>${3}</span><span class=\"sr-only\">${1}</span>${4}</p>" }} {{ .Content | replaceRE $firstP $withDropCapDom | safeHTML }}

[jmooring]

If you just want to target the first paragraph on a page, you can do something like:

main p:first-of-type {
  font-weight: bold;
}

[chrillek]

Why not use CSS and a pseudo-element like nth-of-type?

[Tom_Durand]

{{ $firstP := `(?:^<p>((\b[a-zA-Z])([\w\-]+))((?:.|\n)+?)</p>)` }}
{{ $withDropCapDom := printf "<p class=\"the-first-paragraph\"><span aria-hidden=\"true\">
<span class=\"dropcap\">${2}</span>${3}</span>
<span class=\"sr-only\">${1}</span>${4}</p>"}}
{{ .Content|replaceRE $firstP $withDropCapDom | safeHTML }}

This could get the medal of the most absurdly complicated solution for an extremely simple task

[Arif]

Actually, it was the first paragraph I wanted to target to apply a dropcap in an accessible way. The solution I shared above is also not ideal because it duplicates the first targeted word when copied (e.g. i the first word is The, then the dropcap class is applied but the word now appears twice when copied as TheThe.

Solved the dropcap issue using CSS

main p:not(blockquote p):first-child:first-letter {
<!--- styles go here -->
}