Select second 2nd child div from within the parents div
You need to remove inline style from the second div tag
<div style="border-top: 1px solid #e5e5e5; width: 100%; line-height: 22px;">
It is overriding your css style.
For whatever reason if you want to keep the style, use !important although I highly DO NOT recommend this approach because it is very very bad practice but that's an option (however bad).
.manufacturer_box div:nth-child(2) {
border-top: 5px solid #e0e0e0 !important;
}
The correct selector is use a child selector ">" to make sure that only the second child div, of the parent div, will be selected. If you don't use > and only use:
.manufacturer_box div:nth-child(2){
background: #FF0000;
height: 200px; /* Manually set */
}
This code is not specific enough, in the provided html will select "hello 1" and "hello 2" div's.
So the correct selector is:
CSS
.manufacturer_box > div:nth-child(2){
background: #FF0000;
height: 200px; /* Manually set */
}
This will select only "hello 2" div.
HTML
<div class="manufacturer_box">
<div class="manufacturer_title">
<h1>Title 1</h1>
<div>
<span style="color: #999999; font-size: medium;">hello 1 <br>
<span style="color: #333333;"></span> </span>
</div>
</div>
<div>
<span style="color: #999999; font-size: medium;">hello 2 <br>
<span style="color: #333333;"></span> </span>
</div>
</div>
Here's the snippet, remove the ">" to test that it selects multiple divs, and with ">" selects only the correct one.
.manufacturer_box > div:nth-child(2){
background: #FF0000;
height: 200px; /* Manually set */
}
<div class="manufacturer_box">
<div class="manufacturer_title">
<h1>Title 1</h1>
<div>
<span style="color: #999999; font-size: medium;">hello 1 <br>
<span style="color: #333333;"></span> </span>
</div>
</div>
<div>
<span style="color: #999999; font-size: medium;">hello 2 <br>
<span style="color: #333333;"></span> </span>
</div>
</div>