Почему не применяется этот вложенный стиль CSS?

Question

стиль:

.airport-selections { 
    margin-top: 10px; 

    .airport-input { 
     width: 200px; 
    } 
} 

HTML:

<div class="airport-selections"> 
    <label class="airport-label" for="airport-from"> 
     Departure:  
    </label> 
    <input type="text" class="airport-input"> 
</div> 

Если я не гнездятся их, ширина входа устанавливается на 200. То же самое происходит со всеми стилями на этой странице.

Answer 1

Ваш CSS недействителен, нет такой вещи, как вложение в CSS. Только Менее или Сасс, но до этого у вас есть длинный путь.

Если вы хотите, чтобы выбрать элементы внутри других, используйте

.father .child{ 
    yourstyle 
} 

Все элементы с классом ребенка из внутри всех элементов класса отец получит стиль, примененный к ним.

.airport-selections { 
 
    margin-top: 10px; 
 
} 
 
.airport-input { 
 
    width: 200px; 
 
} 
 

 
/*or 
 

 
.airport-selections .airport-input { 
 
    width: 200px; 
 
} 
 
*/

<div class="airport-selections"> 
 
    <label class="airport-label" for="airport-from">Departure:</label> 
 
    <input type="text" class="airport-input"> 
 
</div>

Answer 2

Без CSS предкомпилятору, нет такого понятия, как вложенные стили CSS.

Проверьте SASS или LESS для гнездования и другие варианты. Но то, что у вас там, не делает то, что вы думаете.