CSS первая и первая буква

Question

Я хочу изменить первую букву каждой главы моей фанфики, используя:

    p:first-of-type::first-letter {
      font-size: 2.5em;
      color: indianred;
      line-height: 1;
    }   

Однако, последняя глава содержит div, и первая буква в первом абзаце этого div также стиле. Почему это происходит, и что я должен добавить к своему коду, чтобы не допустить стилизации этой отдельной буквы?

ETA: HTML выглядит примерно так:

    <p>text</p>
    <p>more text</p>
    <div>
    <p>text</p>
    <p>more text</p>
    </div>

Чтобы было ясно, я ТОЛЬКО хочу, чтобы первая буква оригинального абзаца была оформлена, но первая буква первого абзаца div также затронута. Почему?

Answer 1

Я думаю, вы можете сделать что-то вроде этого:

:not(div)>p:first-of-type::first-letter {
  font-size: 2.5em;
  color: indianred;
  line-height: 1;
}


/* It is like assign the css property for element p but `not` for `p`  `div`- being its parent */

<p>pelement</p>
<p>pelement more text</p>
<p>more text pelement</p>
<p>pelement more text</p>
<div>
  <p>div content</p>
  <p>div content</p>
</div>
<p>ptext</p>
<p>pmore text</p>
<p>ptext</p>
<p>pmore text</p>
<div>
  <p>div content</p>
  <p>div content</p>
</div>

Answer 2

Вы можете добавить отрицание, если p является первым ребенком div:

p:not(div > p:first-child):first-of-type::first-letter {
    font-size: 2.5em;
    color: indianred;
    line-height: 1;
}