CODEWITHSUNDEEP
htmlcss
lionel319
lionel319

Reputation: 1256

Css Pseudo-class :first-letter

Can it be used inside an a tag?

a.x:first-letter
{
   color:red;
}

My name is <a class=x>Lionel</a>

I can't seem to make it work.

Upvotes: 2

Views: 1087

Answers (2)

Spudley
Spudley

Reputation: 168685

Yes, that should work fine.

Can you provide a JSFiddle example of it not working?

It certainly should work -- See here for a test page which demonstrates it in action, and here for a browser compatibility chart (it says it should work in any browser).

[EDIT]

As @SilentGhost says, it only works for block level elements, which <p> is and <a> isn't.

You can make inline elements like <a> act as block elements by using the display:block; style. However this can mess up your page layout.

Fortunately, there is a half-way house option: display:inline-block; which should make your element get treated as a block element without disrupting your page layout. Try adding that to your stylesheet as follows:

a.x {
  display:block;
}

Your :first-letter style should now work.

Upvotes: 1

SilentGhost
SilentGhost

Reputation: 319601

According to css2.1 :first-letter applies only to block container elements.

Upvotes: 5

Related Questions