I have the following code:
<div class="more" style="display: block;">
<div class="row">
<h3></h3>
<p>text<br/>
<img width="556" height="400" src="/img/cms/1.png">
<br></p>
</div>
<div class="row">content</div>
<div class="row">content</div>
<div class="row">content</div>
<div class="row">content</div>
<div class="row">content</div>
<div class="row">content</div>
<div class="row">content</div>
</div>
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.
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:
.more .row img {
width: 100% !important;
hight: auto;
}
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 row within class more. 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.).
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.
You want to use one of the nth selectors.
For example, p:nth-of-type(2) selects every <p> element that is the second <p> element of its parent. You can use this site to determine what browsers support each selector.
Alternatively, you could just add another class to the element that's special.