CSS for all picture Library Slideshow webparts

Question

I am using the v4 master page and noticed a vertical alignment issue on my picture Library Slideshow webparts. I manage to fix this issue by adding the css code display:block !important;. the problem I have with this is that I am adding it for each and every SlideShow webpart in my CSS file:

#MSOPictureLibrarySlideshowWebPart_ctl00_m_g_915dc6ed_5b80_00ds_a61b_5e4236098733_cell
{
    display:block !important;
}


#MSOPictureLibrarySlideshowWebPart_ctl00_m_g_7d2ad14c_0070_5gt0_6411_de03ba984b28_cell
{
    display:block !important;
}

Is there a simpler way to this just once for all slideshow webparts?

Answer 1

Unfortunately SharePoint webparts share many common CSS class names. A possible workaround is to build a custom page layout with a unique CSS selector element wrapped around the webpart zone where your slideshows will be placed. Another possible solution could be to write jQuery that identifies these slideshows by the title and appends a unique CSS selector to each webpart.

Answer 2

You could use the CSS attribute beginning and ending selectors together as follows:

div[id^="MSOPictureLibrarySlideshowWebPart"][id$="_cell"] { 
  display: block !important;
}