CODEWITHSUNDEEP
csscss-selectors
Drumnbass
Drumnbass

Reputation: 914

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

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?

Upvotes: 3

Views: 97

Answers (3)

LcSalazar
LcSalazar

Reputation: 16841

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 {

Upvotes: 5

Manwal
Manwal

Reputation: 23816

You should add ::first-letter at last

p:not(.ejemplo):not(#lectura)::first-letter{
  font-size: 300%;
}
<p>test</p>
<p id="lectura">test</p>
<p class="ejemplo">test</p>

Upvotes: 0

lmgonzalves
lmgonzalves

Reputation: 6588

Use:

p:not([class="ejemplo"]):not([id="lectura"])::first-letter {

Instead:

p::first-letter:not([class="ejemplo"]):not([id="lectura"]) {

Upvotes: 1

Related Questions