Русский
Русский
English
Свойства CSS
Статистика
Реклама

Псевдокласс :first-of-type

Браузер
Internet Explorer
Chrome
Opera
Safari
Firefox
Версия
6.0
7.0
8.0
9.0
2.0
3.0
4.0
5.0
9.2
9.6
10
2.0
3.1
4.0
5.0
2.0
3.0
3.6
4.0
Поддержка
Не поддерживается
Не поддерживается
Не поддерживается
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Не поддерживается
Полная поддержка
Полная поддержка
Не поддерживается
Полная поддержка
Полная поддержка
Полная поддержка
Не поддерживается
Не поддерживается
Полная поддержка
Полная поддержка
Краткая информация
CSS CSS3+
Применяется Ко всем элементам
Ссылка на спецификацию открыть в новой вкладке
Описание
Псевдокласс :first-of-type задает правила стилей для первого элемента в списке дочерних элементов своего родителя. К примеру, добавление :first-of-type к селектору TD устанавливает стиль для всех первых ячеек, поскольку родителем для тега <td> выступает тег <tr>.
Синтаксис
элемент:first-of-type { ... }
Аргументы
Нет.
Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>first-of-type</title>
<style type="text/css">
table {
border-collapse: collapse; /* Убираем двойные границы */
width: 100%; /* Ширина таблицы */
}
td {
border: 1px solid #6A3E14; /* Параметры рамки */
padding: 4px; /* Поля в ячейках */
}
tr:first-of-type {
background: #808990; /* Цвет фона */
color: #fff; /* Цвет текст */
}
td:first-of-type {
background: #CFD6D3; /* Цвет фона */
}
</style>
</head>
<body>
 <table cellspacing="0">
  <tr>
   <td>&nbsp;</td><td>1998</td><td>1999</td><td>2000</td><td>2001</td>
   <td>2002</td><td>2003</td>
  </tr>
  <tr>
   <td>Нефть</td>
   <td>3</td><td>22</td><td>34</td><td>62</td><td>74</td><td>57</td>
  </tr>
  <tr>
   <td>Золото</td>
   <td>4</td><td>13</td><td>69</td><td>72</td><td>56</td><td>47</td>
  </tr>
  <tr>
   <td>Дерево</td>
   <td>4</td><td>7</td><td>73</td><td>79</td><td>34</td><td>86</td>
  </tr>
 </table>
</body>
</html>

Демонстрация примера
Первоисточник - htmlbook.ru Автор - Влад Мержевич
Комментариев (-)
Имя
Электронная почта

Последние комментарии

© 2006-2025, heroes-3.ru