Binding класс ребенка в родительский класс в CSS

Question

Итак, у меня есть дивы следующим образом:

<div class="first"> 
    <div class="second"> 
     <div class="third"> 
     <div class="fourth"> 

     </div> 
     </div> 
    </div> 

Для CSS, я тусклый, чтобы включить «второй», «третий» и «четвертый» внутри «сначала», как показано ниже (но, очевидно, неверно).

.first{ 
    .second{some css} 
    .third{some css} 
    .fourth{some css} 
} 

Каков правильный способ привязки внутреннего класса к первоклассному классу без повторения высшего класса?

Answer 1

Попробуйте SASS.

В SASS вы можете сделать это:

nav { 
    ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    } 

    li { display: inline-block; } 

    a { 
    display: block; 
    padding: 6px 12px; 
    text-decoration: none; 
    } 
} 

SASS Official Page