How can I get Smalĺcaps using first line in mid-chapter within a class in css?

Question

I know this within css will give me the first line, in the first paragragh only:

  p:first-of-type::first-line {
  font-variant-numeric: normal;
  font-variant: small-caps;
  font-variant-alternates: normal;
  font-variant-position: normal;
  font-variant-east-asian: normal;
  letter-spacing: 0.04em;
  font-variant-ligatures: none;
  }

However, I'm trying to do this mid-chapter, after three asterisks * * * and the new paragraph after this calls for small caps. The paragraph after the asterisks has a class named newpara. How can I use the above and maybe use the newpara class? And I would like to use this again after the asterisks. And I know I could use spans but this could get tedious.

I did try:

  .newpara:first-of-type::first-line {
  font-variant-numeric: normal;
  font-variant: small-caps;
  font-variant-alternates: normal;
  font-variant-position: normal;
  font-variant-east-asian: normal;
  letter-spacing: 0.04em;
  font-variant-ligatures: none;
  }

That didn't work.

Any help is welcomed.

Thank you!

Answer 1

You can target the first .newpara element that directly follows an .asterisks element, by using the adjacent sibling combinator, +:

p { max-width: 20em; }

.asterisks + .newpara::first-line {
  font-variant: small-caps;
}

<p class="para">This is mid chapter and not at the start. I'm just using this as an example</p>
<p class="asterisks">* * *</p>
<p class="newpara">I want this new paragraph to have small caps for the first line only, mid-chapter and trying not to use spans.</p>
<p class="newpara">Lorem ipsum.</p>