title: Add style if there are more than one image
body: <p>I'm using a text editor for posts that creates <code>&lt;p&gt;</code> for each part of the content.</p>
  
  <p>Sometimes the content contains 1 image or more and sometimes no images.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.post{
    background-color: #000;
    margin-bottom: 20px;
    color: #fff
  }
  
  .post img + img{
    width: 50%
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="post"&gt;
      &lt;p&gt;First Post&lt;/p&gt;
      &lt;p&gt;
          &lt;img src="http://placehold.it/300x300/200"&gt;
      &lt;/p&gt;
  &lt;/div&gt; &lt;!-- .post --&gt;
      
  &lt;div class="post"&gt;
      &lt;p&gt;Second Post&lt;/p&gt;
      &lt;p&gt;
          &lt;img src="http://placehold.it/300x300/200"&gt;
          &lt;img src="http://placehold.it/300x300/200"&gt;
      &lt;/p&gt;
  &lt;/div&gt; &lt;!-- .post --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So If there are two images, I want each one to take <code>50%</code> of the width.</p>
  
  <p>I can set the width of the second image:</p>
  
  <pre><code>.posts img + img{
      width:50%
  }
  </code></pre>
  
  <p>But how to select the first one?</p>
  
  <p>Here is a live fiddle:
  <a href="http://jsfiddle.net/zjwhgq81/14/" rel="nofollow noreferrer">http://jsfiddle.net/zjwhgq81/14/</a></p>
  
  <p>I need a x-browser compatible solution that is supported in most of the browsers on different browsers.</p>
  
  <p>Please don't suggest adding a class or an id to the <code>img</code>, As I mention I'm using a text editor.</p>