title: Styling image along with caption, if it exists, in Wordpress
body: <p>This is Wordpress-related question, but since desired solution is purely CSS-related, I posted it in here, not at <a href="https://wordpress.stackexchange.com/">wordpress.stackexchange.com</a>.</p>
  
  <p>In my current style, if image has no following caption, it is placed using HTML code like that:</p>
  
  <pre><code>&lt;p&gt;
      &lt;a href="http://cnn.com/file.jpg"&gt;
          &lt;img src="http://cnn.com/file-300x225.jpg" alt="" width="300" height="225" class="aligncenter size-medium wp-image-55"&gt;
      &lt;/a&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>In my current style, it is styled like that:</p>
  
  <pre><code>img {
      display: block;
      padding: 5px;
      background-color: #eee;
      border: 1px solid #ddd;
  }
  </code></pre>
  
  <p>Which draws simple border around it.</p>
  
  <p>If there is a caption following image, entire HTML in this part is a little bit more complex:</p>
  
  <pre><code>&lt;div id="attachment_55" class="wp-caption aligncenter" style="width: 310px"&gt;
      &lt;a href="http://cnn.com/file.jpg"&gt;
          &lt;img src="http://cnn.com/file-300x225.jpg" alt="" width="300" height="225" class="size-medium wp-image-55"&gt;
      &lt;/a&gt;
  
      &lt;p class="wp-caption-text"&gt;Caption&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Currently caption is not styled at all (as per my currently selected theme).</p>
  
  <p>What I would like to achieve is to have entire <code>div</code> styled (image and caption), if there is any caption. If I'm not mistaken, that would require to style <code>img</code> (as currently) only, if it is not followed by <code>&lt;p class="wp-caption-text"&gt;</code>. If it is, then img should not be styled at all and it second-in-row parent (<code>&lt;div class="wp-caption"&gt;</code>) should be styled instead.</p>
  
  <p>That's all for the algorithm. But how to code this in CSS (and whether it is possible at all) -- I don't know.</p>
  
  <p>The simpliest solution would be to never style <code>img</code> and always style <code>&lt;div class="wp-caption"&gt;</code> instead, no matter if there is caption following image or not. But the problem is, that Wordpress is adding that div only, if there is a caption. So styling only it, would result in no border at all, if there is only image.</p>