108. Псевдоклассы: первый дочерний элемент

Еще простой, полезный и статический псевдокласс :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 }

Похожие уроки и записи блога

1. Сделайте цвет текста фраз "Красный текст" красным цветом. HTML код менять нельзя. Используйте теорию из этого урока.

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить на любом популярном форуме в интернете.