scss: nth-child will not work for rotation card

Question

I don't now what I doing wrong? The rotation of each card must be different. But the :nth-child() don't work?

Anyone any idea what I doing wrong?? Every (card) go's -11.21deg ...

I tried the &:nth-child(n-2) but that doesn't work as well. Or maybe there is another method to let it work as well.

.card {
  &:nth-child(1) {
    transform: rotate(-11.21deg);
  }
  &:nth-child(2) {
    transform: rotate(0);
  }
  &:nth-child(3) {
    transform: rotate(11.19deg);
  }
}

<div class="row pt-5">
  <div class="col-4">
    <div class="card">
      <div class="bg-clr-gradient d-flex align-items-center">
        <h1 class="big px-2">1.</h1>
        <h3 class="text-white">Vraag uw offerte aan</h3>
      </div>
      <div class="steps-foto">
        <img src="fotos/fotograaf.png" alt="">
      </div>
    </div>
  </div>
  <div class="col-4">
    <div class="card">
      <div class="bg-clr-gradient d-flex align-items-center">
        <h1 class="big px-2">2.</h1>
        <h3 class="text-white">Wij matchen</h3>
      </div>
      <div class="steps-foto">
        <img src="fotos/fotograaf.png" alt="">
      </div>
    </div>
  </div>
  <div class="col-4">
    <div class="card">
      <div class="bg-clr-gradient d-flex align-items-center">
        <h1 class="big px-2">3.</h1>
        <h3 class="text-white">Ontvang verschillende voorstellen en vergelijk</h3>
      </div>
      <div class="steps-foto">
        <img src="fotos/fotograaf.png" alt="">
      </div>
    </div>
  </div>
</div>

The `nth-child` works with siblings. In your case the `.card` elements are each in a `.col-4` div, so they all are the 1st child in their parent. — Gabriele Petrioli, Mar 31 '23 at 08:04
Does this answer your question? [Why is nth-child selector not working?](https://stackoverflow.com/questions/41867097/why-is-nth-child-selector-not-working) — Amaury Hanser, Mar 31 '23 at 12:21

score 0 · Answer 1 · answered Mar 31 '23 at 10:42

As @GabrielePetrioli already suggested in a comment, you're using &:nth-child selector on elements which are single children of their parent, so all of them will be rotated -11.21deg.

Move the &:nth-child selector to their parents, which are siblings in DOM.

In short, use this:

.col-4 {
  &:nth-child(1) {
    .card {
      transform: rotate(-11.21deg);
    }
  }
  &:nth-child(2) {
    .card {
      transform: rotate(0);
    }
  }
  &:nth-child(3) {
    .card {
      transform: rotate(11.19deg);
    }
  }
}

scss: nth-child will not work for rotation card

1 Answers1