0

For example, let's say my code looks like below. Same from css all divs vs direct child divs but, need in SASS.

<div class="Root">
    <div>ddddddd</div>
    <div>
        <div>pppppppppp</div>
        <div>pppppppppp</div>
    </div>
    <div>ddddddd</div>
</div>

I want to put borders on the divs that contain ddddddd, and I want to set the text color on all divs to green.

There are two rules:

I can't add class attributes. I have to write selectors that start with .Root.

Any Ideas?

Venkatesh Rajavetrivel
  • 114
  • 1
  • 4

1 Answers1

1

It could be like this (SASS):

.Root 
  padding: 1em
  color: green
  > div:not(:nth-of-type(2))
    border: 1px solid red

which compiles to:

.Root {
  padding: 1em;
  color: green;
}
.Root > div:not(:nth-of-type(2)) {
  border: 1px solid red;
}
<div class="Root">
    <div>ddddddd</div>
    <div>
        <div>pppppppppp</div>
        <div>pppppppppp</div>
    </div>
    <div>ddddddd</div>
</div>

Also the last <div> should be </div>.

curveball
  • 4,320
  • 15
  • 39
  • 49