CSS - First-letter selection not working with ID

Question

My CSS :first-letter selector works with all p elements, but with a span that has an id #fletter it won't work...

---

#fletter span:first-letter {
    font-weight: 600;
font-size: 25px;
}

---

<span id="fletter">

---

The selector works fine with my p elements, though.

---

p:first-letter {
font-weight: 600;
font-size: 25px;
}

---

<p>Lorem Ipsum</p>

Answer 1

That is because :first-letter can only be used on block level elements.

One solution could be to display the span as a block level element:

#fletter span {
   display:block;
}

#fletter span:first-letter {
   font-weight: 600;
   font-size: 25px;
}

jsFiddle here.

Answer 2

:first-letter does not work on inline elements such as a span. others inline elements are:

b, big, i, small, tt abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var a, bdo, br, img, map, object, q, script, span, sub, sup button, input, label, select, textarea

:first-letter works on block elements such as a paragraph, table caption, table cell, list item, or those with the inline-block property applied.

if you want a :first-letter selector in a span then write it like this:

p span:first-letter {font-size: 500px !important;}
span {display:block}

<p>
 <span>text here</span>
</p>

Answer 3

According to the W3C, the first-letter property applies to block elements.

So, not spans. Sorry. You may have to create an inner span containing the first letter, maybe with Javascript or something. Or, if it's possible, give the span display:inline-block.

Answer 4

As written, you're targeting a span inside of something with the id fletter. You either need to do

#fletter:first-letter {
    font-weight: 600;
    font-size: 25px;
    display: block;
}

or, if you know this will always be a span:

span#fletter:first-letter {
    font-weight: 600;
    font-size: 25px;
    display: block;
}