Children of a selector: one with margin left and one with right

Asked

Viewed 37 times

1

Next, I always had this doubt have this html structure

<!-- wrap1 -->
<div class="wrap">
  <div class="filho">
    (...)
  </div>
</div>

<!-- wrap2 -->
<div class="wrap">
  <div class="filho">
    (...)
  </div>
</div>

I know I can do this in other ways, but I would like to know if I can select the . wrap. son(of the first) and make him receive margin left and . wrap . son (of the second) receive margin right? The scenario is exactly that. Thank you to anyone who can enlighten me.

css child

  • I don’t understand your question. I could explain it better?

1 answer

0


It is possible using the pseudo-class :nth-child:

.wrap:nth-child(1) .filho{
   margin-left: 50px;
}

.wrap:nth-child(2) .filho{
   margin-right: 50px;
}
<!-- wrap1 -->
<div class="wrap">
  <div class="filho">
    (...)
  </div>
</div>

<!-- wrap2 -->
<div class="wrap">
  <div class="filho">
    (...)
  </div>
</div>

  • Thank you very much, I tested it here and it worked. I liked this solution because it sounds "elegant and readable" in the code.

Browser other questions tagged css child

You are not signed in. Login or sign up in order to post.