title: How to target only specific <span> tags inside a div using css?
body: <p>I want to target only the 1st level  tags inside a div. Here is my code:</p>
  
  <pre><code>&lt;div class="main"&gt;
   &lt;span id="j_id0:j_id42"&gt;
      &lt;span&gt;Customer Info&lt;/span&gt;
   &lt;/span&gt;
   &lt;span id="j_id0:j_id4"&gt;
      &lt;span&gt;Billing Address&lt;/span&gt;
      &lt;div&gt;Text&lt;/div&gt;
   &lt;/span&gt;
   &lt;span id="j_id0:j_id61"&gt;
      &lt;span id="j_id4:22df"&gt;Shipping Address&lt;/span&gt;
      &lt;div&gt;Text&lt;/div&gt;
   &lt;/span&gt;
  </code></pre>
  
  <p></p>
  
  <p>Want to target all the span tags with dynamic ids and not the inner span tags. That is I want to add some specific css properties to all the 1st occurrence of each span tags(the one with ids) within the main div.  Is this possible using css? If not how to do this using javascript?</p>
  
  <p>Note that there may be other ids inside the inner span tags. Want to target only <code>&lt;span id="j_id0:j_id42"&gt;</code> , <code>&lt;span id="j_id0:j_id4"&gt;</code>, <code>&lt;span id="j_id0:j_id61"&gt;</code>. That is only the 1st occurrence of the spans inside main div. </p>