:last-child

Описание

Пвсевдокласс css :first-child позволяет применить стили оформления только к первому дочернему элементу родителя.
А псевдокласс :last-child, напротив, позволяет применить стили к последнему дочернему элементу своего родителя.
Хотя данные псевдоклассы выполняют схожие функции, они не одинаково поддерживаются различнымм браузерамми. Так, псевдокласс :first-child поддерживается большинством браузеров, начиная со старых версий, и даже Internet Explorer с 7 версии.
А родственный ему, псевдокласс :last-child уже не поддерживают браузеры Internet Explorer до 9 версии.

:last-child
Значения: нет
Начальное значение: нет
Область применения: все элементы
Наследование: нет
Поддержка браузерами: Internet Explorer 7+, Chrome 1+, Opera 3.5+, Safari 1+, Firefox 1+, Android 1+
Версия CSS: CSS1, CSS2, CSS2.1, CSS 3
Примечание:

Синтаксис

элемент-родитель:first-child {...стили...}
элемент-родитель:last-child {...стили...}

Пример

body {
    background-color: #dee;
    font-family: Verdana; sans-serif;
}
.list-cont {
    margin: 30px auto;
    width: 900px;
}	
.list :first-child {
    color: #FF0000;
    list-style: circle;
}
.list :last-child {
    color: #0000FF;
    list-style: circle;
}
p :first-child {
    color: #FF0000;
}
<!DOCTYPE HTML>
<head>
	<meta http-equiv="content-type" content="text/html" />
    <title>Псевдоклассы :first-child и :last-child</title>
</head>
<body>
<div class="list-cont">
<ul class="list">
  <li>Первый элемент списка (Чтобы добавить к нему стиль, используем :first-child)</li>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
  <li>Последний элемент списка (Чтобы добавить к нему стиль, используем :last-child). Если вы используете браузер Internet Explorer до 9 версии, то этот элемент списка не будет отличаться от других.</li>
  <li>Последний элемент списка (Чтобы добавить к нему стиль, используем :last-child). Если вы используете браузер Internet Explorer до 9 версии, то этот элемент списка не будет отличаться от других.</li>
</ul>
<p><strong>Первый элемент</strong> бутет выделет отдельным стилем. А <strong>второй</strong> и <strong>третий</strong> будет с обычным форматированием.</p>
<div>
</body>
</html>

Результат

ДЕМО

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *