title: CSS: n-th child not working for background-image
body: <p>I want to have different background images using the <code>nth-child</code> property in CSS. But I am getting the same image in each of the child elements.</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>#main .container .row .col-md-5 .card .overflow-hidden .gradient {
      background-size: cover;
      height         : 15rem;
      transition     : transform 0.5s;
  }
  
  #main .container .row .col-md-5 .card .overflow-hidden .gradient:nth-child(1) {
      background-image: linear-gradient(0deg, rgba(152, 102, 2, 0.8), rgba(90, 102, 2, 0.8)), url(https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&amp;m=517188688&amp;s=612x612&amp;w=0&amp;h=i38qBm2P-6V4vZVEaMy_TaTEaoCMkYhvLCysE7yJQ5Q=);
  }
  
  #main .container .row .col-md-5 .card .overflow-hidden .gradient:nth-child(2) {
      background-image: linear-gradient(0deg, rgba(152, 102, 2, 0.8), rgba(90, 102, 2, 0.8)), url(https://images.unsplash.com/photo-1498404781417-2b02e42ecd0d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTh8fGVwaWMlMjBuYXR1cmV8ZW58MHx8MHx8&amp;w=1000&amp;q=80);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"&gt;
  
  &lt;section id="main" class="c"&gt;
      &lt;div class="container py-5"&gt;
          &lt;div class="row pt-5"&gt;
              &lt;div class="col-md-1"&gt;&lt;/div&gt;
              &lt;div class="col-md-5 d-flex align-items-stretch"&gt;
                  &lt;div class="card shadow-sm"&gt;
                      &lt;div class="overflow-hidden"&gt;
                          &lt;div class="gradient"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="card-body"&gt;
                          &lt;h5 class="card-title"&gt;Header 1&lt;/h5&gt;
                          &lt;p class="card-text"&gt;Content 1
                          &lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-md-5 d-flex align-items-stretch"&gt;
                  &lt;div class="card shadow-sm"&gt;
                      &lt;div class="overflow-hidden"&gt;
                          &lt;div class="gradient"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="card-body"&gt;
                          &lt;h5 class="card-title"&gt;Header 1&lt;/h5&gt;
                          &lt;p class="card-text"&gt;Content 1
                          &lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-md-1"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I have already tried putting various combinations for calling out the <code>nth-child</code> but nothing seems to be working for me. This is my first encounter with <code>nth-child</code> property.</p>