for my site with user-generated content, I would like to add drop caps but only if the p element is first child of article (for example).

I tried various combinations of first-child along with :is but couldn't get this to work.

For example with this markup:

<article>
    <h2>Heading</h2>
    <p>Text..</p>
</article>

I don't want the drop cap to appear, because there is the heading already.

But with this:

<article>
    <p>Text.. (this should start with drop cap)</p>
    <p>Text..</p>
</article>

I want to have drop cap for the first letter.

Is this possible to do via CSS only?

There's also a case where the first p contains just img due to Markdown parser, but I guess there is not much I can do about that.

CodePudding user response：

Use article p:first-child:first-letter to target the first letter of the first p-child of every article.

article p:first-child:first-letter {
  font-size: 20px;
}

<article>
  <p>Text.. (article without heading and dropcap)</p>
  <p>Text..</p>
</article>
<hr/>
<article>
  <h1>Article with heading and without dropcap</h1>
  <p>Text..</p>
  <p>Text..</p>
</article>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

See https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child and https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter for how those two pseudo-classes work.