html - CSS drop cap with dynamic Wordpress content

Question

I have created a styled dropcap for my blog posts in Wordpress using CSS. How can I make the dropcap only apply to only the first paragraph and not the other subsequent paragraphs?

Any help would be greatly appreciated, thank you in advance.

.dropcap p::first-letter {
  font-size: 4rem !important;
  color: #8A8A8A;
  margin-right: 10px;
  margin-bottom: 8px;
  line-height: 1.8rem;
  font-family: 'Baskerville', serif;
}

.dropcap p:first-of-type::first-letter {
  font-size: 4rem !important;
  color: #8A8A8A;
  margin-right: 10px;
  margin-bottom: 8px;
  line-height: 1.8rem;
  font-family: 'Baskerville', serif;
}

<div class="dropcap">
  <pre></pre>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <em>This is italic text</em>, <strong>this is bold text</strong>, <em><strong>this is bold italic</strong></em> text. Donec justo massa, imperdiet ac efficitur sit amet, pretium a nunc. Aliquam
    sem nisi, sagittis a lacus ut, pulvinar molestie magna. Nam aliquam tincidunt erat nec pulvinar. Nullam urna nunc, cursus nec pharetra eu, euismod id dolor. Duis imperdiet, ante iaculis suscipit pharetra, mauris neque ultricies lacus, tincidunt posuere
    lectus ipsum ac est. Donec odio nunc, feugiat nec mi eget, faucibus euismod urna. Donec pretium sit amet leo eget auctor. Nulla consequat metus at ullamcorper faucibus. Donec ultricies tristique velit sit amet commodo. Morbi bibendum, nulla ut aliquam
    bibendum, ex lacus lacinia dui, quis sagittis justo neque vel mauris. Phasellus varius dapibus sapien, et euismod turpis. Praesent elit metus, posuere nec ipsum eget, ultricies lobortis massa.</p>

  <p>Quisque ornare libero id nibh imperdiet ultrices. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc fringilla urna in mauris consequat, eget lobortis elit sodales. Curabitur ipsum ligula, tincidunt eu venenatis
    quis, ullamcorper et nunc. Sed in hendrerit felis, eu fermentum mauris. In varius non urna at ullamcorper. Duis at arcu nibh. Vivamus et elementum purus. Nulla a tellus dapibus, tristique libero ut, porta odio. Nulla luctus aliquet tempus. Pellentesque
    ultrices finibus turpis, non vestibulum metus.</p>

</div>

question from:https://stackoverflow.com/questions/65940646/css-drop-cap-with-dynamic-wordpress-content

Answer 1

The problem you have, is that your first rule is also applying. Remove this:

.dropcap p::first-letter {
  font-size: 4rem !important;
  color: #8A8A8A;
  margin-right: 10px;
  margin-bottom: 8px;
  line-height: 1.8rem;
  font-family: 'Baskerville', serif;
}

.dropcap p:first-of-type::first-letter {
  font-size: 4rem !important;
  color: #8A8A8A;
  margin-right: 10px;
  margin-bottom: 8px;
  line-height: 1.8rem;
  font-family: 'Baskerville', serif;
}

<div class="dropcap">
  <pre></pre>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <em>This is italic text</em>, <strong>this is bold text</strong>, <em><strong>this is bold italic</strong></em> text. Donec justo massa, imperdiet ac efficitur sit amet, pretium a nunc. Aliquam
    sem nisi, sagittis a lacus ut, pulvinar molestie magna. Nam aliquam tincidunt erat nec pulvinar. Nullam urna nunc, cursus nec pharetra eu, euismod id dolor. Duis imperdiet, ante iaculis suscipit pharetra, mauris neque ultricies lacus, tincidunt posuere
    lectus ipsum ac est. Donec odio nunc, feugiat nec mi eget, faucibus euismod urna. Donec pretium sit amet leo eget auctor. Nulla consequat metus at ullamcorper faucibus. Donec ultricies tristique velit sit amet commodo. Morbi bibendum, nulla ut aliquam
    bibendum, ex lacus lacinia dui, quis sagittis justo neque vel mauris. Phasellus varius dapibus sapien, et euismod turpis. Praesent elit metus, posuere nec ipsum eget, ultricies lobortis massa.</p>

  <p>Quisque ornare libero id nibh imperdiet ultrices. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc fringilla urna in mauris consequat, eget lobortis elit sodales. Curabitur ipsum ligula, tincidunt eu venenatis
    quis, ullamcorper et nunc. Sed in hendrerit felis, eu fermentum mauris. In varius non urna at ullamcorper. Duis at arcu nibh. Vivamus et elementum purus. Nulla a tellus dapibus, tristique libero ut, porta odio. Nulla luctus aliquet tempus. Pellentesque
    ultrices finibus turpis, non vestibulum metus.</p>

</div>