Damien Damien - 3 months ago 14
CSS Question

targeting a bootstrap row with first-child doesn't work

trying to target just the first .row but i seem to be targeting all rows. Why isn't first-child working? Here's my code:

<footer class="f1">
<div class="container">
<div class="row">
<div class="col-md-5">
<img src="/images/logo_footer.png" alt=""/>
</div>
<div class="col-md-7"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-5">
<img src="/images/logo_footer.png" alt=""/>
</div>
<div class="col-md-7">
</div>
</div>
</div>
</footer>


CSS

.f1 .container .row:first-child {
padding-top:42px;
position:relative;
}

Answer

The pseudo selector :first-child is targeting the first child of each thing that matches the selector: .f1 .container .row. Since you have two instances of containers and each with a row as a child, the selector is affecting the first child of each. If you want only the row of the first container to be affected, you need to specify the first container as well. Ex: .f1 .container:first-child .row