Как выбрать определенные элементы по классу CSS

Question

Дано:

<div class='name1'>
    <div class='name'>1</div>
    <div class='name'>2</div>
</div>

<div class='name2'>div</div>
    <div class='name'>1</div>
    <div class='name'>2</div>
    <div class='name666'>1</div>
    <div class='nam665e'>2</div>
</div>

Как можно прописать стили .name {font-size: 12px;} для <div class='name'>, которые входят только в <div class='name2'>? Если в целом для <div class='name'> задан стиль, например: .name {font-size: 18px;}

Answer 1

Это можно сделать следующим образом:

.name2 div {
   font-size: 12px;
}

В данном случае будут выбраны только те div'ы, которые находиться внутри блока с именем класса name2.

Если Вы хотит выбрать только те div'ы которые являются прямыми наследниками блока с именем класса name2, то:

.name2 > div {
   font-size: 12px;
}

Дополняю ответ в связи с изменением оригинального вопроса:

.name {
   font-size: 18px;
}

.name2 .name {
   font-size: 12px;
}

Здесь все аналогично примерам выше.

Справочник CSS Селекторы

БЛОГ НА HUSL

Как выбрать определенные элементы по классу CSS

Ответы (1 шт):