CSS pseudo class won't work when normal class is set from javascript, under FF

I have p.first_p:first-letter in my stylesheet, as I checked, it works well when class first_p is set in HTML. Problems start when I use javascript to find elements and then set their class.

Under Chrome and Opera it 开发者_运维百科works fine (I need to check IE 8 and 9, and FF3).

FF 5.01 changes the class, but still pseudo class setting doesn't affect the element.

It seems that FF needs to 'refresh' css settings of element before pseudo class starts working, so I made rather dirty workaround - script replaces affected node with its clone.

Is there a better way to solve that issue? Some way to make FF recalculate everything it knows about node? Also that workaround isn't enough for IE 7.

Edit: yeah, pseudo-element not pseudo-class, my bad

It is definitely a bug. A possible work-around would be changing the display style of the element. Unfortunately, this needs to be done delayed, after the previous style change applied:

element.className = 'first-class';
element.style.display = 'inline';
setTimeout(function(){
  element.style.display = '';
}, 0);

Demo: http://jsfiddle.net/pvEDY/3/

You're running into https://bugzilla.mozilla.org/show_bug.cgi?id=8253

Is it possible to not use javascript?

I'm guessing that you're applying first_p to the first paragraph of particular elements. It possible for you to use the :first-child selector instead?

I'm not sure if this will work, but you could try something like the following, assuming you want to apply this to children of divs with class "copy"

.copy p:first-child:first-letter{
  color: #abcdef; /* or whatever */
}

this definitely works and you don't need javascript, except for crappy old IE.

Alternatively you could try this:

.element p:first-letter{
  font-size: 20px;
}

.element p + p:first-letter{
  font-size: inherit;
}

This css makes any paragraph that is not preceded by another paragraph have a styled first letter. Would that solve your problem?

Wait, you want it to work in Firefox. Try this:

.element p:first-of-type:first-letter{
  font-size: 20px;
}

It selects the first matching element. The :first-of-type pesudo-element is supported by Firefox, Opera, Chrome and Safari according to SitePoint's page for :first-of-type