Hide all div.class children of TD, then show first div.class child

Question

The following should work in theory, to the best of my knowledge, but is not:

td small.attachments {
  display: none;
}
td small.attachments:first-child {
  display: inline-block !important;
}

<table>
  <tr>
    <td class="views-field-field-entry-images-fid">
      <a href="#"><img src="x.jpg" /></a>
      <small class="attachments">Files<div class="file-listing">Content A + B</div></small>
      <small class="attachments">Files<div class="file-listing">Content B</div></small>
      <small class="links">Links<div class="file-listing">Content C</div></small>
    </td>
  </tr>
</table>

The result is, any time a small.attachments element has no small.attachment siblings, it is shown fine, with the first-child rule applied and overriding the display:none rule.

However, when there are two small.attachments elements in a TD, one after the other (in example above), BOTH are hidden, and the first-child rule has no effect.

What's going on?

PS: I've tested in Safari and Firefox.

Answer 1

So it seems I've misunderstood the intention of the "first-child" property.

As an IE-compliant fix, I used jQuery to wrap the <small> elements in a <div> on a per <td> basis.

The rules then worked as expected and according to spec.

<script type="text/javascript">

  $("td.views-field-field-entry-images-fid").each(function() {

    $(this).children("small").wrapAll("<div class='attachments-wrapper'></div>");

  });

</script>

Thanks for the refresher!