Selector for the nth nested element

Question

I am working on a tree view of indefinable nestability, but would like to define some nested rules for styling. For example, I want a first-level element to have a certain border. Nested elements immediately below them have a different border. I have a working example, but it is static and verbose. I know it's better to use a selector, but I can't get it to work. Here is my current solution -

.item { border-left-color: #somecolor1; } .item > .item { border-left-color: #somecolor2; } .item > .item > .item { border-left-color: #somecolor3; } .item > .item > .item > .item { border-left-color: #somecolor4; } .item > .item > .item > .item > .item { border-left-color: #somecolor5; } 

So this works, but obviously it is pretty verbose. Is there a better way?

Answer 1

In CSS, the selector string pretty much describes the nesting structure, and currently there are no generation skip selectors that could theoretically do something like .item:nth-grandchild(4) to replace your fifth example.

If reducing the verbosity of your css is of great importance to you (let's say you have 10 or even 100 nesting levels that you include), then you really need to study the modification of html itself to reduce the required css. This can be done dynamically using server-side scripting (PHP, etc.) or client-side scripting (Javascript) or statically by you. Which method you choose will depend on many factors.

The html modification may be in the form of more specific classes or direct style properties, but I recommend using them. Here are at least four ways to reduce css:

# 1 Several classes, one indicator level

HTML example

 <div class="item L-1"> <div class="item L-2"> <div class="item L-3"> </div> </div> </div> 

CSS example

 .item.L-1 { border-left-color: #somecolor1; } .item.L-2 { border-left-color: #somecolor2; } .item.L-3 { border-left-color: #somecolor3; } 

# 2 Several classes, one indicator color

HTML example

 <div class="item LBC-1"> <div class="item LBC-2"> <div class="item LBC-3"> </div> </div> </div> 

CSS example

 .item.LBC-1 { border-left-color: #somecolor1; } .item.LBC-2 { border-left-color: #somecolor2; } .item.LBC-3 { border-left-color: #somecolor3; } 

# 3 Level indication level of one class

HTML example

 <div class="item-L1"> <div class="item-L2"> <div class="item-L3"> </div> </div> </div> 

CSS example

 [class *= "item-"] { /* common css properties for the items goes here */ } .item-L1 { border-left-color: #somecolor1; } .item-L2 { border-left-color: #somecolor2; } .item-L3 { border-left-color: #somecolor3; } 

# 4 Style properties for each item

HTML example

 <div class="item" style="border-left-color: #somecolor1"> <div class="item" style="border-left-color: #somecolor2"> <div class="item" style="border-left-color: #somecolor3"> </div> </div> </div> 

CSS example

 /* none to control color */ 

Discussion of the "Best"

Often, dynamic solutions end up producing html, like # 4 does, which ultimately makes html very verbose, and I personally would not recommend it. However, these dynamic solutions do not need to do this, but instead you can add class names, for example, # 1-3.

Ultimately, the “best” largely depends on what you are trying to achieve, how much control you have and what other properties you need to change. Personally, I would also avoid # 2, because it binds the presentation too much to html, having the class name associated with the "left border color". It would be better for me to solve solution # 1 or # 3, because they just install classes that help css know what the “level” .item , which then allows you to use specific targeting for that level for everything you might need for .

Of course, if you really dealt with 100 nested levels, then even for solutions No. 1-3 you may need to study the css preprocessor to generate 100 levels of code. But the css output will still be much smaller than the long selector strings needed using the current method you are doing.