Самоучитель CSS Справочник CSS Селекторы Стили по умолчанию Цвета CSS Единицы измерения
Селекторы CSS

CSS псевдокласс :first-child

Псевдокласс :first-child используется для выбора элементов, которые являются первыми дочерними элементами у своих родителей.

/* Выбор всех элементов <p>, которые являются первыми
   дочерними элементами внутри родительского элемента */
p:first-child { color: red; }

Псевдокласс :first-child часто используется совместно с псевдоклассом :last-child, для одновременной стилизации первого и последнего дочерних элементов.

Пример

table { 
  width: 70%; 
  border-collapse: collapse;
}

td { 
  border: 1px solid #C2C2FF; 
  padding: 3px 7px; 
}

tr:first-child, tr:last-child { 
  background-color: #9999FF; 
  color: #fff; 
}
<table>
  <tr><td>Имя</td><td>Фамилия</td><td>Положение</td></tr>
  <tr><td>Гомер</td><td>Симпсон</td><td>отец</td></tr>
  <tr><td>Мардж</td><td>Симпсон</td><td>мать</td></tr>
  <tr><td>Барт</td><td>Симпсон</td><td>сын</td></tr>
  <tr><td>Лиза</td><td>Симпсон</td><td>дочь</td></tr>
  <tr><td>Мэгги</td><td>Симпсон</td><td>дочь</td></tr>
  <tr><td>Имя</td><td>Фамилия</td><td>Положение</td></tr>
</table>

Результат

ИмяФамилияПоложение
ГомерСимпсонотец
МарджСимпсонмать
БартСимпсонсын
ЛизаСимпсондочь
МэггиСимпсондочь
ИмяФамилияПоложение
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2024 © puzzleweb.ru | razumnikum.ru

Реклама на сайте | puzinfo@puzzleweb.ru