Посмотреть все уроки курса
Выбрать другой урок из курса
Обсуждение
Теория урока

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

Еще простой, полезный и статический псевдокласс :first-child. Кто знает английский, тот уже догадался, для чего этот псевдокласс. :first-child – выбор первого дочернего элемента. Несмотря на его простоту, его часто не правильно используют. Причина в недопонимание работы этого псевдокласса. Смотрим первый HTML пример.

Пример 1
<div>
<p>Первый абзац</p>
<p>Второй абзац</p>
<ul>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>
<b>Третий</b> <u>пункт</u>
</li>
</ul>
</div>

Ну что, сколько вы видите первый дочерних элементов? Их три штуки, это <p>Первый абзац</p>, <li>Первый пункт</li> и <b>Третий</b>.

Пример 2
p:first-child { color: red }
b:first-child { color: green }
После и перед двоеточием (:) нет пробела!

Кстати, чтобы посчитать все первые дочерние элементы, можно написать так, как в примере три и четыре, это как вариант.

Пример 3
<p>Первый абзац</p>
<p>Второй абзац</p>
<ul>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>
<b>Третий</b> <u>пункт</u>
</li>
</ul>
Пример 4
:first-child { color: red }
<
×
>
Раздел «Селекторы в CSS»
Урок 1.1. Основные правила и знакомство с селекторами
Урок 2.1. Группировка селекторов в CSS
Урок 3.1. Селекторы классов и идентификаторов
Урок 4.1. Несколько классов
Урок 5.1. Селекторы идентификаторов (id селекторы)
Урок 6.1. Селекторы атрибутов: простой выбор
Урок 7.1. Селекторы атрибутов: по конкретному значению
Урок 8.1. Селекторы атрибутов: по частичному значению
Урок 9.1. Селекторы атрибутов: по конкретному атрибуту
Урок 10.1. Структура документа: родитель-потомок в CSS
Урок 11.1. Структура документа: дочерние элементы в CSS
Урок 12.1. Структура документа: сестринские элементы в CSS
Урок 13.1. Псевдоклассы: ссылки
Урок 15.1. Псевдоэлементы: первая буква и строка
Другие разделы
Раздел 1. Знакомство с HTML
Раздел 2. Разметка текста
Раздел 3. Ссылки
Раздел 4. Изображения
Раздел 5. Таблицы
Раздел 6. Формы
Раздел 7. HTML5
Раздел 8. Остальное
Раздел 9. Знакомство с CSS
Раздел 11. Структура и каскад
Раздел 12. Единицы измерения
Раздел 13. Шрифт
Раздел 14. Свойства текста
Раздел 15. Форматирование
Раздел 16. Отступы, рамки, поля
Раздел 17. Цвета и фон
Раздел 18. Позиционирование
Раздел 19. Верстка таблиц
Раздел 20. Списки
Раздел 21. Анимация
Раздел 22. Практика с htmlbook.ru
Раздел 23. Элементы сайта
Не публикуйте свой код прямо в комментариях. Во-первых, он плохо отображается. Во-вторых, он может содержать для кого-то «спойлеры», т.е. ответы на практику. Воспользуйтесь специальными сервисами: cssdeck.com или jsfiddle.net.
Комментарии, содержащие код (пару строк не считается), будут безжалостно удаляться.