如何加强伪CSS规则

Question

Is there anyway to reinforce pseudo css rules? ie:
I have a listing of divs (playlist) which I color with the following rules:

#playlist .playlist_item { 
  background: #d6d6d6;
}

#playlist .playlist_item:nth-child(odd) {
  background: #b3b3b3;
}

Now, when a song is playing, I use setInterval and JQuery's .animate function to pulse the background color. When the song is finished I clear the interval, but of course the song's background remains the last color set in the interval. Is there a way to re-set the song's color based on the CSS rule? Otherwise I'll have to keep track of the previous song (which may have changed position, and thus color) or setup distinct background color classes and reset the classes of all the songs in the playlist anytime someone adds, removes, or moves a song in the playlist or a song ends. I'd much rather use a CSS only approach.

Thanks in advance, Dan

Answer 1

You're defining a default background-color with lower specificity and half of the cases with higher specificity. That said, here are two CSS solutions:

First:

#playlist .playlist_item  { /* only here for compatibility with browsers that don't understand CSS3 selectors */
  background: #d6d6d6;
}

#playlist .playlist_item:nth-child(even) { 
  background: #d6d6d6;
}

#playlist .playlist_item:nth-child(odd) {
  background: #b3b3b3;
}

The first and second rules can't be combined if you must support old browsers, otherwise you can erase the first rule. Even and odd cover every case so it's safe to do it.

Second:

#playlist .playlist_item  { /* compatibility reasons again */
  background: #d6d6d6;
}

#playlist .playlist_item:nth-child(n) { 
  background: #d6d6d6;
}

#playlist .playlist_item:nth-child(odd) {
  background: #b3b3b3;
}

The second rule has the same effect as the first one, except with a higher priority. It's the fourth example in CSS3 selectors - Structural pseudo-classes

Answer 2

An alternative that I don't see mentioned above is to use CSS3 animation for your pulsing. Make JS apply a "is-pulsing" class; the pulsing animation loops infinitely until the class is removed; then the element's style reverts to its regular, non-pulsing background. I made a CodePen to illustrate: http://codepen.io/MisterGrumpyPants/pen/enGcC

In addition to being simple, this solution would also perform better than JS animation. Worth a try.

Answer 3

Set the style attribute to ""

For example:

node.style.backgroundColor=""

Answer 4

I'm not 100% sure on this one, but jQuery's animate is changing the style attribute directly on the element, so, after clearing the interval, if you did something like this:

$(this).attr("style","");

It should clear anything in the style attribute, and let the CSS property come through again.

Answer 5

here's an example:

$('.playlist_item').click(
        function() {
             var $dv = $(this);
             $dv.data('oldBG', $dv.css('backgroundColor')); // save the original background color
            $dv.animate({backgroundColor: '#ff0000'}, 2000, function() {
                 $(this).css('backgroundColor', $(this).data('oldBG')); // once done, apply old background color
            });                 
       });

Running example

If you wanted to get the target background color, you could add a css class and item for that:

.playlist_item_highlight { display:none; background:#FF0000; } and add that the document so you could $('#playlist .playlist_item_hightlight').css('backgroundColor');

Answer 6

Solution I chose:
I am keeping track of the previously played song using jQuery ie:

currently_playing = $('#' + currElmId);

This is done after sending the song to the flash.

Earlier in the script (to stop the previous song from flashing) I simply reset the css for the appropriate elements using:

currently_playing.stop(true, false);
clearInterval(highlight);

Hope this can help someone else.