title: Modify only one div among divs with same class name in css stylesheet
body: <p>I have the following code:</p>
  
  <pre><code>&lt;div class="more" style="display: block;"&gt;
      &lt;div class="row"&gt;
          &lt;h3&gt;&lt;/h3&gt;
          &lt;p&gt;text&lt;br/&gt;
          &lt;img width="556" height="400" src="/img/cms/1.png"&gt;
          &lt;br&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;content&lt;/div&gt;
      &lt;div class="row"&gt;content&lt;/div&gt;
      &lt;div class="row"&gt;content&lt;/div&gt;
      &lt;div class="row"&gt;content&lt;/div&gt;
      &lt;div class="row"&gt;content&lt;/div&gt;
      &lt;div class="row"&gt;content&lt;/div&gt;
      &lt;div class="row"&gt;content&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The class "more" is activated through JS every time the visitor pressed a particular button. Then all those divs will be displayed; each one under the same name "row". For every product (each product contains the "more" div with multiple rows) there will be an image in the second row.</p>
  
  <p>When the website will be in mobile size dimensions, I have to resize the image and set the width to 100% or something similar. That works fine. So I've done the following:</p>
  
  <pre><code>.more .row img {
      width: 100% !important;
      hight: auto;
  }
  </code></pre>
  
  <p>The problem is that I have some icons in one of the next rows which are changed as well as the above css modification applies to all the images which belong to class <strong>row</strong> within class <strong>more</strong>. So the icons are very big (see width: 100%). Is there any way to apply that modification only in the second row? I just need to resize the pic within second row (for all products the big image that need to be resized is in 2nd row.).</p>
  
  <p>I am not sure if it's possible but I'm just asking just in case. It will save me some time and it will be extremely useful for future purposes. Thanks a lot.</p>