is there a css tag that can target a div at a specific nested depth from its parent?

Question

I am having difficulty finding a css selector that can gracefully handle the following (This set of css rules is currently 25 divs deep):

    div{background-color: #ffb3b3; outline:1px solid black;}
    div div{background-color: #ffc6b3;}
    div div div{background-color: #ffd9b3;}
    div div div div{background-color: #ffecb3;}
    div div div div div {background-color: #ffffb3;}
    div div div div div div {background-color: #ecffb3;}
    div div div div div div div {background-color: #d9ffb3;}
    div div div div div div div div {background-color: #c6ffb3;}
    div div div div div div div div div {background-color: #b3ffb3;}
    div div div div div div div div div div div {background-color: #b3ffc6;}
    div div div div div div div div div div div div {background-color: #b3ffd9;}
    div div div div div div div div div div div div div {background-color: #b3ffec;}
    div div div div div div div div div div div div div div {background-color: #b3ffff;}
    div div div div div div div div div div div div div div div {background-color: #b3ecff;}
    div div div div div div div div div div div div div div div div {background-color: #b3d9ff;}
    div div div div div div div div div div div div div div div div div {background-color: #b3c6ff;}
    div div div div div div div div div div div div div div div div div div {background-color: #b3b3ff;}
    div div div div div div div div div div div div div div div div div div div {background-color: #c6b3ff;}
    div div div div div div div div div div div div div div div div div div div div {background-color: #d9b3ff;}
    div div div div div div div div div div div div div div div div div div div div div {background-color: #ecb3ff;}
    div div div div div div div div div div div div div div div div div div div div div div {background-color: #ffb3ff;}
    div div div div div div div div div div div div div div div div div div div div div div div {background-color: #ffb3ec;}
    div div div div div div div div div div div div div div div div div div div div div div div div {background-color: #ffb3d9;}
    div div div div div div div div div div div div div div div div div div div div div div div div div {background-color: #ffb3c6;}
    div div div div div div div div div div div div div div div div div div div div div div div div div div {background-color: #ffb3b3;}

Is there a selector designed for this sort of nested tag?

Why am I doing this? answer: this set of css rules is used to gain an understanding of nested containers in a bootstrap page. here is a simple example of some html that these css rules can be applied to on:

<div class="container">
  <div class="row">
    <div class="col-12 col-lg-6">
        <p>One of three columns</p>
        <div class="row">
            <div class="col-12 col-lg-6">
                <p>One of three columns</p>
            </div>
            <div class="col-12 col-lg-6">
                <p>One of three columns</p>
            </div>
       </div>
    </div>
    <div class="col-12 col-lg-6">
      <p>One of three columns</p>
      <div class="col-12 col-lg-6">
          <p>One of three columns</p>
      </div>
        <div class="col-12 col-lg-6">
          <p>One of three columns</p>
      </div>
    </div>
  </div>
</div>

        .demo{display:inline; }
        
        div{background-color: #ffb3b3; outline:1px solid black;}
        div div{background-color: #ffc6b3;}
        div div div{background-color: #ffd9b3;}
        div div div div{background-color: #ffecb3;}
        div div div div div {background-color: #ffffb3;}
        div div div div div div {background-color: #ecffb3;}
        div div div div div div div {background-color: #d9ffb3;}
        div div div div div div div div {background-color: #c6ffb3;}
        div div div div div div div div div {background-color: #b3ffb3;}
        div div div div div div div div div div div {background-color: #b3ffc6;}
        div div div div div div div div div div div div {background-color: #b3ffd9;}
        div div div div div div div div div div div div div {background-color: #b3ffec;}
        div div div div div div div div div div div div div div {background-color: #b3ffff;}
        div div div div div div div div div div div div div div div {background-color: #b3ecff;}
        div div div div div div div div div div div div div div div div {background-color: #b3d9ff;}
        div div div div div div div div div div div div div div div div div {background-color: #b3c6ff;}
        div div div div div div div div div div div div div div div div div div {background-color: #b3b3ff;}
        div div div div div div div div div div div div div div div div div div div {background-color: #c6b3ff;}
        div div div div div div div div div div div div div div div div div div div div {background-color: #d9b3ff;}
        div div div div div div div div div div div div div div div div div div div div div {background-color: #ecb3ff;}
        div div div div div div div div div div div div div div div div div div div div div div {background-color: #ffb3ff;}
        div div div div div div div div div div div div div div div div div div div div div div div {background-color: #ffb3ec;}
        div div div div div div div div div div div div div div div div div div div div div div div div {background-color: #ffb3d9;}
        div div div div div div div div div div div div div div div div div div div div div div div div div {background-color: #ffb3c6;}
        div div div div div div div div div div div div div div div div div div div div div div div div div div {background-color: #ffb3b3;}

  <div class='demo'>1&nbsp;<div class='demo'>2&nbsp;<div class='demo'>3&nbsp;<div class='demo'>4&nbsp;<div class='demo'>5&nbsp;<div class='demo'>6&nbsp;<div class='demo'>7&nbsp;<div class='demo'>8&nbsp;<div class='demo'>9&nbsp;<div class='demo'>10&nbsp;<div class='demo'>11&nbsp;<div class='demo'>12&nbsp;<div class='demo'>13&nbsp;<div class='demo'>14&nbsp;<div class='demo'>15&nbsp;<div class='demo'>16&nbsp;<div class='demo'>17&nbsp;<div class='demo'>18&nbsp;<div class='demo'>19&nbsp;<div class='demo'>20&nbsp;<div class='demo'>21&nbsp;<div class='demo'>22&nbsp;<div class='demo'>23&nbsp;<div class='demo'>24&nbsp;<div class='demo'>25&nbsp;</div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>      
<div class="container">
<div class="row">
<div class="col-12 col-lg-6">
    <p>One of three columns</p>
    <div class="row">
        <div class="col-6">
            <p>One of three columns</p>
        </div>
        <div class="col-6">
            <p>One of three columns</p>
        </div>
   </div>
</div>
<div class="col-12 col-lg-6">
  <p>One of three columns</p>
  <div class="col-6">
      <p>One of three columns</p>
  </div>
    <div class="col-6">
      <p>One of three columns</p>
  </div>
</div>
</div>
</div>

Can you illustrate the HTML you're trying to fix with this. It seems it would be easier and quicker to simply add a class to a "closer" parent element than from the base parent — Martin, Aug 10 '18 at 16:44
Your question looks like [**a duplicate of this**](https://stackoverflow.com/questions/22270407/styling-nested-lists-with-any-depth). — Martin, Aug 10 '18 at 16:46
Updated answer for nested divs, though I would recommend specific nesting class selectors per level. — NSTuttle, Aug 10 '18 at 16:52
I would recommend checking out this article if you haven't already [MDN Combinators](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors). — K-Log, Aug 10 '18 at 18:49

score 1 · Answer 1 · answered Aug 10 '18 at 16:46

1

There is no css property to select the nth nested child. However, this is a fairly common issue and in most cases the easier and more maintainable solution is to use css classes to target specific elements rather than nest.

.hello {
  color: blue;
  font-size: 20px;
}

<div>
  <div>
    <div>
      <div class="hello">
        Hello World
      </div>
    </div>
  </div>
</div>

answered Aug 10 '18 at 16:46

CodeCheshire

671
7
25

1

This is the best answer, specific selectors per nested level – NSTuttle Aug 10 '18 at 16:55

score 0 · Answer 2 · 2018-08-10T18:46:18.310

0

Nesting HTML <DIV> elements is something I do somewhat often. Programmers have all kinds of reasons for coding methods, tricks, and even hacks. The best HTML pages have a lot of content - and <TABLE> is usually much better suited to information display and organization.

Using the CSS class token is usually the best way. Much of my own HTML is generated by Java web-scraping routines that reformat data for readability purposes - and my guess is that any HTML page with "extremely nested" <DIV> elements would probably be produced by a routine - rather than being hand-typed.

If they are hand-typed, why not use either the CSS class token, or the CSS ID token? Some argue, by the way, that the "#" (ID) token for CSS is "the wrong way", but I think it can be tremendously useful if you really only have one HTML tag that fits a CSS-format model, because it facilities a programmers ability to keep all of the CSS formatting rules in a single, separate .css file.

Most importantly: In 2 out of the 3 examples that you have provided here - each of the <DIV> elements already have CSS class identifiers. Therefore using those tags - rather than a CSS nested syntax which I have not heard of - would do just fine!

And, of course, javascript has many tricks for descending and ascending "The DOM Tree" (Document Object Model Tree). element.child, element.parent etc. !!

edited Aug 10 '18 at 18:46

answered Aug 10 '18 at 18:38

I do not want to add classes to all of my divs because the nested structure can change often. If I decide to change my layout, the levels of nesting can quickly change quite dramatically. Then, I would need to change all of the classes. – Hoytman Aug 10 '18 at 18:46
THE CORE ISSUE (to me) is - are these computer generated HTML pages, or are these hand-typed HTML pages. If it is the latter, then I basically understand your plight completely. IN ANY CASE (I have seen this all the time on pages on the internet) - making DIV elements have classes with actual names like (LEVEL1, LEVEL2, LEVEL3, or L1, L2, L3) where their class is name is the tree depth is just one idea to try. AGAIN, though, if these are computer generated pages (not hand-typed pages) - more robust code that automatically produces CSS CLASS NAMES that include the tree depth would work! – Aug 10 '18 at 18:51
Also, there are similar questions on SO like this - for instance: https://stackoverflow.com/questions/4564916/nesting-css-classes And this: https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector – Aug 10 '18 at 18:59
Yes, LESS and SASS are very effective solutions. – Hoytman Aug 10 '18 at 19:18

is there a css tag that can target a div at a specific nested depth from its parent?

2 Answers2