Как применить стиль к прямым потомкам?

Question

[Дмитрий Яковлев]

<div class="test">
    <ul>
        <li>
            Первый
            <ul>
                <li>
                    Потомок 1
                </li>
                 <li>
                    Потомок 2
                  </li>
            </ul>
        </li>
        <li>
            Второй
        </li>
    </ul>
</div>

Как сделать чтобы слова "Первый" и "Второй" были красным цветом, но при этом Потомок 1 и Потомок 2 оставались черным.

.test ul > li {
	color:red;
}

вот этот кусок стиля, окрашивает все в красный цвет, получается Потомок 1 и Потомок 2 наследует их.

Answer 1

[0xD34F]

Так:

.test ul {
  color: red;
}

.test ul ul {
  color: black;
}

??

UPD. Вынесено из комментариев:

это решение требует, постоянно сбрасывать стили по умолчанию

В смысле - для вложенных элементов ul? Решим вопрос один раз для всех, вместо того, чтобы стилизовать .test ul ul, пусть будет

ul {
  color: initial;
}

Comments

[Дмитрий Яковлев]

это решение требует, постоянно сбрасывать стили по умолчанию.

[0xD34F]

дополнил ответ

Answer 2

[Ivan Bogachev]

Как сделать чтобы слова "Первый" и "Второй" были красным цветом, но при этом Потомок 1 и Потомок 2 оставались черным.

Можно сделать по-простому:

ul {
    color: #f00;
}

ul ul {
    color: #000;
}

Но в перспективе предпочтительнее отойти от использования подобных селекторов и прийти к бэм или какой-нибудь еще методологии.

Comments

[Дмитрий Яковлев]

спасибо, помогло.

бэм не могу использовать потому что, у меня универсальное дерево неограниченной вложенности.

[Дмитрий Яковлев]

это решение требует, постоянно сбрасывать стили по умолчанию.

Answer 3

[Марти Макфлай]

Ой вы мудриииите все. Всё просто же:
.test > ul > li {
color:red;
}

Comments

[Дмитрий Яковлев]

не работает, все красные становятся