I need to apply css to a parent and 3 nested deep children, this works:

.the-parent,  
.the-parent > div,
.the-parent > div > div,
.the-parent > div > div > div{
    display: flex
}

Is this the only way to accomplish this?

I was thinking of simply:

.the-parent div{
    display: flex
}

But that will select ALL children deep, and I only need 3 children deep.

I wonder if there is better syntax such as:

.the-parent >(3) div{
    display: flex
}

I hope it make sense, thank you

I need to apply css to a parent and 3 nested deep children, this works:

.the-parent,  
.the-parent > div,
.the-parent > div > div,
.the-parent > div > div > div{
    display: flex
}

Is this the only way to accomplish this?

I was thinking of simply:

.the-parent div{
    display: flex
}

But that will select ALL children deep, and I only need 3 children deep.

I wonder if there is better syntax such as:

.the-parent >(3) div{
    display: flex
}

I hope it make sense, thank you

• css
• css-selectors

4 Answers 4

Unfortunately, CSS does not have a built-in way to select elements up to a specific depth. Your method is the way to achieve this using pure CSS.

However, if you're looking for a more concise solution, you can use CSS preprocessors like SASS or LESS to generate the nested selectors programmatically. Here's how you can simplify the process using SASS:

.the-parent {
  @for $i from 1 through 3 {
    & > #{repeat('div > ', $i - 1)}div {
      display: flex
    }
  }
}

You can use two selectors like below:

.parent {
  border: 1px solid blue;
  padding: 10px;
}
.parent * {
  padding: 10px;
  min-height: 10px;
  border: 1px solid;
}

/* set to all div */
.parent div {
  border-color: red;
}
/* reset after x depth */
.parent > * > * > * > * div {
  border-color: initial;
}

<div class="parent">
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div>
                    <div>
                      <div></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

With nesting css it looks quite compact:

.parent {
  padding: 10px;
  background: yellow;
}
.parent div {
  padding: 10px;
  background: yellow;
}

.parent{
  &, &>div, &>div>div, &>div>div>div{
    background: blue;
  }
}

<div class="parent">
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

If you are trying to do a css only solution, your provided method is probably the best approach to it, even when kind of ugly. What you could do instead is giving each div you want to address a specific class name and then run the normal css selection. Something like this:

<div class="parent">
  <div class="child1">
    <div class="child2">
      <div class="child3"></div>
    </div>
  </div>
</div>

with the selection:

.parent,
.child1,
.child2,
.child3 {
  display: flex;
}

But I am afraid that this solution is not much compact or "prettier" than before. Just maybe a bit more readable for humans.

One last thing that comes to mind is the :nth-child() functionality. Maybe you can find a way to do what you want to do with an architecture more like in the provided example.

Good luck!