CODEWITHSUNDEEP
javascriptcssfirefoxpseudo-element
apeBoy
apeBoy

Reputation: 63

Mutliple CSS pseudo selectors in Firefox not working

Specifically this:

p:first-child:first-letter {font-size:48px;}

Works in all browsers (even IE8 for crying out loud) but not Firefox (v.10.02)

Anybody know a CSS or javascript work-around? The only thing I can think of doing to achieve what I want (a drop cap in the first paragraph) is to dynamically wrap that first character with span tags. But surely there's a better way?

Upvotes: 0

Views: 456

Answers (2)

JKirchartz
JKirchartz

Reputation: 18042

you could do:

p:first-letter {font-size:48px;}
p + p:first-letter {font-size:1rem}

that uses the new rem unit, which is root em, for IE>8 you would have to put in your root font size manually.

or you can use JQuery like

   $('p:first-child').addClass('first-child');

and change your css to

p.first-child:first-letter { font-size:48px}

Upvotes: 1

Jonas Grumann
Jonas Grumann

Reputation: 10786

I think p doesn't have any children. try with:

p:first-letter{font-size:48px;}

Upvotes: 0

Related Questions