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?

LcSalazar · Accepted Answer · 2015-10-27T13:01:24.500

5

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 {

edited Oct 27 '15 at 13:01

answered Oct 27 '15 at 12:55

LcSalazar

@torazaburo: For pseudo-elements it does seem to. Please try the selector as provided in question and it doesn't work. – Harry Oct 27 '15 at 13:01
@torazaburo did you even try to run the code snippet? – Daemedeor Oct 27 '15 at 13:04
Its there in the official spec also - http://www.w3.org/TR/css3-selectors/#pseudo-elements – Harry Oct 27 '15 at 13:05
@LcSalazar it worked! But what if instead of just 1 class to not apply the style I would have 2 or more? Is there something like `not(.ejemplo||.ejemplo2||.ejemplo3)` or should I repeat the `:not` selector for every class? – Drumnbass Oct 27 '15 at 13:06
1

@Drumnbass: As far as I know `:not` can't take complex selectors, so you'll more than likely have to repeat it. – Harry Oct 27 '15 at 13:08
1

@Drumnbass - Take a look at this question: http://stackoverflow.com/questions/3338680/is-there-a-css-selector-by-class-prefix – LcSalazar Oct 27 '15 at 13:32

score 1 · Answer 2 · answered Oct 27 '15 at 12:54

1

Use:

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

Instead:

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

answered Oct 27 '15 at 12:54

lmgonzalves

@torazaburo This is the same answer that the others, and it works! – lmgonzalves Oct 27 '15 at 13:06

score 0 · Answer 3 · answered Oct 27 '15 at 12:58

0

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>

answered Oct 27 '15 at 12:58

Manwal

3 Answers3