CSS: styling a Slideshare embedded slide

We can actually customize the appearance of an embedded Slideshare slide using CSS. More precisely, all we need to do is to use CSS3 attribute selectors to make sure that we match the main container of our slide. In fact, a Slideshare embed code is made up of the following elements:

<div id="__ss_44054">

  <strong><a>...</a></strong>
  <object>...</object>
  
  <div><a>...</a></div>

</div>

The ID of the main container is made up of the ss string and a progressive number that is different on each slide. We can take advantage of this string and use it with a CSS3 attribute selector that matches a substring in any position:

div[id*="ss"] {
 width: 300px !important;
 margin: 2em auto;
}

The !important statement will be used even later, because there are many inline styles attached to the HTML structure:

div[id*="ss"] strong:first-child {
 font: 1.5em "Trebuchet MS", Trebuchet, sans-serif;
 margin: 0 !important;
 padding: 8px;
 display: block;
 text-align: center;
 background: #c40;
 border-radius: 6px 6px 0 0;
}

div[id*="ss"] strong:first-child a {
 text-decoration: none;
 color: #fff;
}

div[id*="ss"] object {
 display: block;
 width: 100%;
 height: 200px;
}

div[id*="ss"] object + div {
 background: #000;
 padding: 0.5em !important;
 color: #fff;
 text-align: center;
 font: small Arial, sans-serif;
 border-radius: 0 0 6px 6px;
}

div[id*="ss"] object + div a {
 color: #f50;
}

And this is the result: