CODEWITHSUNDEEP
csssass
Gambit2007
Gambit2007

Reputation: 3968

SCSS - nth child as a parent?

If i have some code that looks like this:

.my-class {
    :nth-child(2) {
      padding-left: 0;
    }
}

Where nth-child(2) is a div,can i then "target" another div that has the some-div class inside of it?

I tried to do something like this:

.my-class {
    :nth-child(2) {
      padding-left: 0;

      .some-div {
        some: style;
      }
    }
}

but it didn't work..

Upvotes: 0

Views: 495

Answers (2)

APAD1
APAD1

Reputation: 13666

It would help if you shared your HTML structure, but assuming you are trying to target the child, with class some-div, of the 2nd child of the my-class element, your code should work just fine.

This:

.my-class {
  :nth-child(2) {
    padding-left: 0;
    .some-div {
      color:red;
    }
  }
}

Would compile to this:

.my-class :nth-child(2) {
  padding-left: 0;
}
.my-class :nth-child(2) .some-div {
  color: red;
}


.my-class :nth-child(2) {
  padding-left: 0;
}
.my-class :nth-child(2) .some-div {
  color: red;
}
<div class="my-class">
  <div>1.</div>
  <div>2.<div class="some-div">2a.</div></div>
</div>

Upvotes: 1

Deykun
Deykun

Reputation: 1271

It should work, first check if your parent have padding-left: 0 - it probably doesn't because you haven't used & in &:nth-child(2).

Right now you are generating css .my-class :nth-child(2) .some-div (you are looking for element with class some-div in second child of element with class my-class) not .my-class:nth-child(2) .some-div.

Upvotes: 0

Related Questions