title: CSS propreties for first element of all HTML-tree
body: <p>I have the following html</p>
  <pre><code>&lt;div class=&quot;text&quot;&gt;
      &lt;p&gt;
          &lt;img ...&gt; //properties are needed only for this
      &lt;/p&gt;
      &lt;img ...&gt;
      &lt;figure&gt;
          &lt;img ...&gt;
      &lt;/figure&gt;
      &lt;p&gt;
          &lt;img ...&gt;
      &lt;/p&gt;
      &lt;p&gt;
          &lt;figure&gt;
              &lt;img ...&gt;
          &lt;/figure&gt;
      &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  <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>div.text img:first-of-type {
      border: 5px solid red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="text"&gt;
      &lt;p&gt;
          &lt;img src="https://dummyimage.com/150x150/aaa/fff"&gt;
      &lt;/p&gt;
      &lt;img src="https://dummyimage.com/150x150/aaa/fff"&gt;
      &lt;figure&gt;
          &lt;img src="https://dummyimage.com/150x150/aaa/fff"&gt;
      &lt;/figure&gt;
      &lt;p&gt;
          &lt;img src="https://dummyimage.com/150x150/aaa/fff"&gt;
      &lt;/p&gt;
      &lt;p&gt;
          &lt;figure&gt;
              &lt;img src="https://dummyimage.com/150x150/aaa/fff"&gt;
          &lt;/figure&gt;
      &lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>First img may be children of <em>div</em> or wrapped in <em>p</em>, <em>figure</em>.</p>
  <p>How can I add CSS-propreties for first <em>img</em> in <strong>ALL TREE</strong> of <em>div.text</em>?</p>