Как стилизовать вложенные div с тем же именем класса?

Question

У меня есть проблема, когда у меня есть вложенные div с тем же именем класса, что и у их родителя, которые я хочу стилизовать немного по-другому. По сути, я хочу сделать, чтобы чем глубже эти div были вложены, тем меньше будет их непрозрачность фона. Так что мой код будет выглядеть примерно так:

<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> 

Я не могу дать им уникальные имена, так как иерархия генерируется динамически, и некоторые из моих функций зависят от того, чтобы эти div имели одинаковое имя класса для достижения того же поведения на своем вложенном уровне. Так как я могу стилизовать их на основе их уровня что-то вроде

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

если вообще возможно?

Answer 1

Селектор будет .Folder-container>.Folder-container, но, поскольку вы собираетесь отображать 50% желтого, а не 100% желтого, он выглядит точно так же, как 100% желтый. Итак, IMO, вы должны отобразить 50% белого во вложенном 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>

Со следующим 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 2

.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>

Answer 3

Хитрость в том, что вы не можете стилизовать контейнер, но вам нужно стилизовать папки внутри них. В противном случае вы поместите фон на задний план, и таким образом вы можете сделать их более непрозрачными. С так, как я написал здесь, вы можете сделать их более прозрачными.

.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);
}