en.javascript.info/12-css-for-js/15-css-selectors/relation.view/index.html
2015-02-27 13:21:58 +03:00

59 lines
1.3 KiB
HTML

<!DOCTYPE HTML>
<html>
<head>
<style>
#languages li {
color: brown;
}
#languages > li {
color: black;
}
#e-slavic { font-style: italic; }
#e-slavic ~ li {
color: red;
}
#latvian { font-style: italic; }
#latvian * { font-style: normal }
#latvian + li {
color: green;
}
code {
border: 1px solid black;
}
</style>
</head>
<body>
<h3>Балтославянские языки</h3>
<ol id="languages">
<li>Славянские языки
<ol>
<li>Славянские микроязыки</li>
<li>Праславянский язык</li>
<li id="e-slavic">Восточнославянские языки <code>#e-slavic</code></li>
<li>Западнославянские языки <code>#e-slavic ~ li</code></li>
<li>Южнославянские языки <code>#e-slavic ~ li</code></li>
<li> ... <code>#e-slavic ~ li</code></li>
</ol>
</li>
<li>Балтийские языки
<ol>
<li>Литовский язык</li>
<li id="latvian">Латышский язык <code>#latvian</code>
<ol><li>Латгальский язык <code>#latvian *</code></li></ol>
</li>
<li>Прусский язык <code>#latvian + li </code></li>
<li>... (следующий элемент уже не <code>#latvian + li</code>)</li>
</ol>
</li>
</ol>
</body>
</html>