Самоучитель CSS > Оформление ссылок > Псевдо-классы :first-child и :last-child

Псевдо-классы :first-child и :last-child

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      div p:first-child { color: green; }
      div p:last-child { color: blue; } 
    </style>
  </head>
 
  <body>
   
    <div>
      <p>Первый дочерний абзац элемента div, он будет отображаться зеленого цвета.</p>
       
      <p>Второй дочерний абзац элемента div, он будет отображаться черного цвета,
      поскольку никаких правил для него не задано.</p>
       
      <p>Третий дочерний абзац элемента div, он же является последним дочерним абзацем.
      Цвет текста будет синим.</p>
    </div>
     
  </body>
</html>

Результат:

Отредактируйте код, указанный выше, и нажмите кнопку "GO" для просмотра результата.