Как использовать псевдокласс :first-child в CSS для стилизации элементов?

Псевдокласс :first-child в CSS позволяет стилизовать первый дочерний элемент своего родителя. javarush.com basicweb.ru Это полезно для выделения первого элемента в группе однотипных элементов, таких как списки или абзацы. javarush.com

Синтаксис: селектор:first-child { свойства: значения; }. javarush.com

Пример использования: выделение первого элемента списка жирным шрифтом и красным цветом: javarush.com

/* Стилизация первого элемента списка */ li:first-child { font-weight: bold; color: red; }.                                                                          javarush.com                       

Ещё один пример: стилизация первого параграфа внутри div, преобразование его в верхний регистр: javarush.com

/* Стилизация первого параграфа в div */ div p:first-child { text-transform: uppercase; }.                                                                          javarush.com                       

Важно учитывать, что псевдокласс :first-child не будет работать, если первый элемент родителя не является дочерним. blog.dreaper.ru Например, если перед первым элементом есть текстовый узел, псевдокласс не сработает. blog.dreaper.ru