Урок с практикой по CSS (Онлайн курсы)
Выбрать другой урок из курса
Теория урока

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

Еще простой, полезный и статический псевдокласс :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. Анимация
Внимание! Впервые на этом сайте?

Образовательный ресурс codebra.ru полностью посвящен программированию. Все курсы и уроки находятся на главной странице. Вы можете начать изучение прямо сейчас, кликнув на ссылки: HTML, CSS, JavaScript, C++, PHP, jQuery, Python, Bootstrap 3

Если что-то не нашли, то воспользуйтесь поиском по сайту, который находится на главной странице в самом верху.

Удачи в обучении!

Закрыть окно