title: how to select first child div from div parent
body: <p>I have a movie card where the content is dynamic. I'm trying to select the first child DIV of the <code>left-side-bar</code>, however, since the content is dynamically generated, the <code>background-color</code> is changed to all divs.</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>#left-side-bar div:first-child {
    background-color: #e50914 !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="left-side-bar"&gt;
    &lt;h3 style="border-bottom: 1px solid red; padding-bottom: 7px"&gt;
      Top 5 movies
    &lt;/h3&gt;
    @foreach (var movie in Model.SidebarData.TopMovies) {
    &lt;a asp-controller="Home" asp-action="Detail" asp-route-id="@movie.Id"&gt;
      &lt;div class="card-sb"&gt;
        &lt;center&gt;&lt;img src="@movie.ImageUrl" /&gt;&lt;/center&gt;
        &lt;p&gt;@movie.Title&lt;/p&gt;
        &lt;span class="crown"&gt;
          &lt;i class="fas fa-crown" style="color: goldenrod"&gt;&lt;/i&gt;
          @movie.Views
        &lt;/span&gt;
      &lt;/div&gt;
    &lt;/a&gt;
    }
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>