Привет. Я хочу применить стили для root и дочерних элементов отдельно CSS.
.animals{
background-color: bisque;
}
.pets{
background-color: rgb(160, 5, 180);
}
.small{
background-color: rgb(68, 255, 155);
}
.big{
background-color: rgb(255, 68, 208);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul class="animals">
<li>Forest</li>
<li>
<ul class="pets">
<li>
<ul class="small">
<li>Rabbit</li>
<li>Squirral</li>
<li>
<ul class="small">
<li>
<ul class="small">
<li>Rabbit</li>
<li>Squirral</li>
<li>Cat</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<ul class="big">
<li>Dog</li>
<li>Cow</li>
<li>Horse</li>
<li>Elephent</li>
</ul>
</li>
</ul>
</ul>
</body>
</html>
Код выше, структура списка 3 уровня ul
<ul> <!-- level 1, name: sub1 -->
<li>
<ul> <!-- level 2, name: sub1 -->
<li>
<ul> <!-- level 3, name: sub2 -->
<li>
<ul></ul> <!-- level N, name: sub2 -->
</li>
</ul>
</li>
</ul>
</li>
</ul>
Код выше, sub1 будет иметь несколько, несколько только уровень sub2. Поэтому я не люблю использовать классы для этого постоянного структурного списка. Мне любопытно изучить что-то вроде first-child типа селектора в CSS.
Мне нужно применять стили следующим образом:
- Применять стили только для
level 1 - Применение стилей только для уровня 2
- Применение стилей только для уровня 3
- Применение стилей для
level 2 & level 2 в сочетании.
Как использовать CSS для применения стилей без id и class. Заранее спасибо!