Внимание! На этой странице вы найдете материал урока из архивного курса по CSS. Курс был написан в 2015 и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по CSS и на странице первого урока.
Еще простой, полезный и статический псевдокласс :first-child. Кто знает английский, тот уже догадался, для чего этот псевдокласс. :first-child – выбор первого дочернего элемента. Несмотря на его простоту, его часто не правильно используют. Причина в недопонимание работы этого псевдокласса. Смотрим первый HTML пример.
<div>
<p>Первый абзац</p>
<p>Второй абзац</p>
<ul>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>
<b>Третий</b> <u>пункт</u>
</li>
</ul>
</div>Ну что, сколько вы видите первый дочерних элементов? Их три штуки, это <p>Первый абзац</p>, <li>Первый пункт</li> и <b>Третий</b>.
p:first-child { color: red }
b:first-child { color: green }После и перед двоеточием (:) нет пробела!
Кстати, чтобы посчитать все первые дочерние элементы, можно написать так, как в примере три и четыре, это как вариант.
<p>Первый абзац</p>
<p>Второй абзац</p>
<ul>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>
<b>Третий</b> <u>пункт</u>
</li>
</ul>:first-child { color: red }Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу CSS.
