如何用相同的类名设置嵌套div的样式？

Question

I have this problem where I have nested divs with the same class name as their parent that I wish to style slightly differently. Basically what I want to do is the deeper these divs are nested the less their background color opacity will be. So my code would look something along the lines of this

<div class="Folder-container"> //Yellow

  <div class="Folder-container">  //Yellow @ 0.5 opacity 

      <div class="folder">
          <div class="file">File</div>
      </div>

      <div class="folder">
          <div class="file">File</div>
      </div>

  </div>

  <div class="Folder-container"> //Yellow @ 0.5 opacity

      <div class="folder">
          <div class="file">File</div>
      </div>

      <div class="folder">
          <div class="file">File</div>
      </div>

  </div>
</div> 

I can't give them unique names as the hierarchy is dynamically generated and some of my functions depend on these divs having the same class name to achieve the same behavior within their nested level. So how can I style these based on their level something like

.Folder-container > Folder-container
{
   //set styling
} 

if at all possible?

Answer 1

The trick is that you cannot style the container, but you need to style the folders within them. Otherwise you will put background on background, and this way you can only make them more opague. With the way I wrote it down here you can make them more transparent.

.Folder-container > .folder
{
   background-color: rgba(0,0,0,1);
}

.Folder-container > .Folder-container > .folder
{
   background-color: rgba(0,0,0,.8);
}

.Folder-container > .Folder-container > .Folder-container > .folder
{
   background-color: rgba(255,255,255,.6);
} 

.Folder-container > .Folder-container > .Folder-container > .Folder_Container > .folder
{
   background-color: rgba(255,255,255,.4);
}

Answer 2

The selector would be .Folder-container>.Folder-container but because you're going to display 50% yellow over 100% yellow, it looks just like 100% yellow. So IMO you should display 50% white in the nested div: .Folder-container>.Folder-container{background-color:rgba(255, 255, 255, 0.5);}

<div class="Folder-container"> //Yellow

  <div class="Folder-container">  //Yellow @ 0.5 opacity 

      <div class="folder">
          <div class="file">File</div>
      </div>

      <div class="folder">
          <div class="file">File</div>
      </div>

  </div>

  <div class="Folder-container"> //Yellow @ 0.5 opacity

      <div class="Folder-container"> //Yellow @ 0.75 opacity
        <div class="folder">
            <div class="file">File</div>
        </div>

        <div class="folder">
            <div class="file">File</div>
        </div>
      </div>
  </div>
</div>

With the following css:

.Folder-container{background-color:yellow;}
.Folder-container>.Folder-container{background-color:rgba(255, 255, 255, 0.5);}
.Folder-container>.Folder-container>.Folder-container{background-color:rgba(255, 255, 255, 0.75);}

Answer 3

 .Folder-container{background: yellow} .Folder-container > .Folder-container{opacity: 0.5} .Folder-container > .Folder-container .folder{background: #999} 

 <div class="Folder-container"> //Yellow <div class="Folder-container"> //Yellow @ 0.5 opacity <div class="folder"> <div class="file">File</div> </div> <div class="folder"> <div class="file">File</div> </div> </div> <div class="Folder-container"> //Yellow @ 0.5 opacity <div class="folder"> <div class="file">File</div> </div> <div class="folder"> <div class="file">File</div> </div> </div> </div>