Псевдокласс first-child. Как придать значение первому элементу css

Это может выглядеть вот так:

<div id="main">
       <p>Элемент 1</p>
       <p>Элемент 1</p>
       <p>Элемент 3</p>
</div>

Причем, количество вложенных элементов может постоянно меняться, например, программным способом (скриптами).

Если перед нами будет стоять задача применить определенные стили CSS именно к первому элементу среди списка вложенных элементов, то могут возникнуть определенные трудности.

С появлением CSS3 и модуля «Селекторы» такие обращения к элементу стали возможными.

Для этого используется специальный селектор, псевдокласс first-child. С его помощью выбирается первый, по очередности расположения в коде, дочерний элемент, который располагается в родительском элементе.

Синтаксис здесь простой:

элемент: first-child { свойства:значения }

Давайте вернемся к примеру, который был в начале этой заметки. Например, при реализации следующего стиля:

#main p:first-child { color:red; }

Этой записью мы сообщаем о том, что в родительском элементе #main, необходимо найти элемент «p», который расположен в коде выше всех.

Будет выделен «Элемент 1».

Кроме того, аналогичным образом можно выделить последний элемент в родительском. Прочитайте еще про псевдокласс last-child.