Просмотров: 4 938

Псевдокласс 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», который расположен в коде выше всех.

first-child

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

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

  • meloff

    А как например покрасить в красный цвет только второй пункт первого дива?

    Элемент 1
    Элемент 2
    Элемент 3

    Элемент 4
    Элемент 5
    Элемент 6

  • http://vk.com/id51541049 Viktor Karionov

    .list:first-child p:nth-child(2){
    color: red;
    }

    http://codepen.io/anon/pen/QEoQZA