CSS - p::first-letter:not does not work

Question

I have to increase the size of the first letter of every P elements that are not class="ejemplo" or id="lectura".

This works perfectly:

p::first-letter {
  font-size: 300%;
}

But when I try to match the requirements and I do this, it doesn't work:

p::first-letter:not([class="ejemplo"]):not([id="lectura"]) {
  font-size: 300%;
}

I'm beginner in CSS, so what am I doing wrong?

Answer 1

The pseudo element ::first-letter must come last in your statement:

Order DOES matter:

MDN's docs:

You can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement.

So:

p:not([class="ejemplo"]):not([id="lectura"])::first-letter {
  font-size: 300%;
}

<p>Loren Ipsum Dolor Sit Amet</p>
<p class="ejemplo">Loren Ipsum Dolor Sit Amet</p>
<p id="lectura">Loren Ipsum Dolor Sit Amet</p>

Also...

Remember that for id selection, use #id instead of [id=''], and .class instead of [class='']

p:not(.ejemplo):not(#lectura)::first-letter {